{"_id":"@material-ui/codemod","_rev":"53-057a6b4f59bb7c8cea6a3f3d8256af0e","name":"@material-ui/codemod","dist-tags":{"next":"5.0.0-beta.4","latest":"4.5.1"},"versions":{"1.0.0-beta.41":{"name":"@material-ui/codemod","version":"1.0.0-beta.41","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@1.0.0-beta.41","maintainers":[{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"kof","email":"oleg008@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"rosskevin","email":"kevin.ross@alienfast.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/v1-beta/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"243b2fc3527117a2f85a3178f4668ab4ac13ab83","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-1.0.0-beta.41.tgz","fileCount":20,"integrity":"sha512-HA9CM0aUnm8P6/oMTNLX+FyEgjTqmd86eNlEv4CEMwsNrTKaV9RVbGJ5GTMV9bJS7hnt4Bw2m9v8xMB0ob9eRQ==","signatures":[{"sig":"MEUCIH76xUQzQ3v5asRGB4Yosl7pVqT1Au4LJo5LijEEEl0DAiEAnkAgvHIL2PAtHktQhc7bHUoc1jmgg5YUFRXxygkDX78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62726},"engines":{"node":">=6.11.0"},"private":false,"scripts":{"test":"yarn test:unit","build":"../../node_modules/.bin/rimraf lib && ../../node_modules/.bin/babel ./src --out-dir ./lib","version":"npm publish","test:unit":"cd ../../ && ./node_modules/.bin/mocha packages/material-ui-codemod/src/**/*.test.js","test:watch":"yarn test:unit --watch"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git"},"_npmVersion":"5.6.0","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"9.8.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.4.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_1.0.0-beta.41_1523198338978_0.69431215814029","host":"s3://npm-registry-packages"}},"1.0.0-beta.45":{"name":"@material-ui/codemod","version":"1.0.0-beta.45","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@1.0.0-beta.45","maintainers":[{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"kof","email":"oleg008@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"rosskevin","email":"kevin.ross@alienfast.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/v1-beta/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"c91c68cec53e473cb804f8b90837d00e4024dcbe","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-1.0.0-beta.45.tgz","fileCount":18,"integrity":"sha512-+xLVJLMv+3L5/NsWTXAwElo1flRGE1dVMC7R42DMlclxR811/KcD3PObtQYrbtIz6dctSr9RjH41n8ursnzjTg==","signatures":[{"sig":"MEUCIB3EMYeZh6UK18K9biGi75mzo3kPY+EHwQf4cVSYWO0qAiEAhcXhXScM0iRuBscVSsT/W9m+euqLwKda8qzhOYRxMzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7yRrCRA9TVsSAnZWagAAjU4P/3bgivLC4wnfoucjwexp\nGA/IoENKVvosX+SvU7jzjrF/RiTu6DmZR6dj+A+CzDaec+Ld3w8ljzzPaNHp\nUkEZ2b2udsaWVvjNVw7p+7Gh4wZiid4I3Ha7e9VYMmwWpTZctJu5g/KtD9k8\nMFhyiy6U1j8zF6Se+gUEz5/uyQsLBXwO3oMUJTEKHV5gtafB/GFeyY2cBxn2\nVaycQsZc1THwMAaq+kBLIP0CWhogni/e8BAq6bTM6qYTYIGZotJDnNiFVr18\n18xkvt4Se/XYVHNuR42F3evaIKpgcL4BULoJXduveNFhNp4bZzFtHqLolizm\nSPkgtshygDF2UA2fZ79gXVDCxawhq3U9QZtG7e49VpxVgxC0QBnHb3KDVnA5\nkCXm7Q0jmzWYf+OWP5oMqq0DoBwA6d0LQNQl3Zw6Ad686R2IPzgio24rfwBF\nU+ats9EaqW/gZRvG/l4S3GFzxNXFTRjjRw6bNxyzN46nTeYoCIMK3ZvZfD9Y\nCrqBZ1kFyhzXOX34Q+Wz1qai6r1EUebGnC4BUfzuGtikLRmFOP8lSSQrzB9M\nh7Ks6DrwJaJDg8k1FTnqnzMvNKqFIyLLGaprmaErVbpKp/DOmUeWkVR4Q7iv\njAzI2lUd60QTvCRAp8WSb0t5KjyCxTHBxVUY9PrIvNqBE8airaiWoOcOcvaO\ntJBB\r\n=5TDF\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=6.11.0"},"private":false,"scripts":{"test":"yarn test:unit","build":"../../node_modules/.bin/rimraf lib && ../../node_modules/.bin/babel ./src --out-dir ./lib --ignore *.test","version":"npm publish","test:unit":"cd ../../ && ./node_modules/.bin/mocha packages/material-ui-codemod/src/**/*.test.js","test:watch":"yarn test:unit --watch"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git"},"_npmVersion":"5.6.0","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"9.8.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.5.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_1.0.0-beta.45_1525621865484_0.47074677510389895","host":"s3://npm-registry-packages"}},"1.0.0-rc.0":{"name":"@material-ui/codemod","version":"1.0.0-rc.0","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@1.0.0-rc.0","maintainers":[{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"kof","email":"oleg008@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"rosskevin","email":"kevin.ross@alienfast.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"d3d96b90d1f960f41e99688e6fbf92e74d8084bb","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-1.0.0-rc.0.tgz","fileCount":26,"integrity":"sha512-/3ywcmBvKzxQjCi8wZmiezpuhecCscaDnLwvZyKfoFZQzUnPFrNhC4eJMyJTMaa4VCuSRap/xsucDFJ3tUhCwQ==","signatures":[{"sig":"MEYCIQDnjCBkAOjqZLd2pTPZ9RtE+HrpX8zzjenNv/9kWeFcHgIhAM5NSQaaHTol7ijEAURwjoLQnV8yxvaOhtQWQwnuCjOV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+I4YCRA9TVsSAnZWagAAKQgP/iHwVXvY/tuZ2Jo04OH/\nzuN2As6KDhVevbEuMLjYtZ5Ndt/P5HLUE+B5uHBLlwBT8qa0bn67H2bXC9j3\nleoijwjfe605hUI0/RH76o4wlM7OTu83r0k83W0ejeYOQt/5L2upGOSIBJBG\nxFSRkzmubr2kK50T4CPPGKEh0K4yDaC19ndCFa04cpk4D3uJ/B2sus8tIfUk\nBaELb1P/ZnPEPOU2B3WqgoBddBk8LsQVs7u+gb0Lou57VnjW7Q2Rl6fc+eau\n7F0Q0Hd3F5y8pgyeB7VMgpi+7RJvOhxdD0mxGClBZJvtOpZd7kmgqhuEf6I7\nXo0AMQlL+troXlsS/TZRPxYbda7+hGJZhPgcD6aFfFZ7Xe7m9K/mjvCNRCQw\nBue+etWhYNU9odCbqejRJeW7cO+BVYB/9nYNvrsktBYYYNQlDSLHI3tqckxP\nUnjHSWqIicjmqb+OpwNsnnUNFhVtrFsVOCWobkJME5S4xRr2UzeSnqfxIDl5\nRT/aIlI2K1vOqDrGXXWFAk8fxqrDdMudDSTz/1MnCgWtevvs+Pp3vYLbOq43\nrExO5zpKqnB7q5SZex5imcgTA5yV25Vn5u9DOaXTqP7TzhtxOtVzJZbiaPty\nCK48pqxCzRZnfmJDmrNStUmgFMKbaITWMoAEJC6+mHbH9VbAcXhINcwb1KDf\nknuu\r\n=5NFR\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=6.0.0"},"private":false,"scripts":{"test":"yarn test:unit","build":"../../node_modules/.bin/rimraf lib && ../../node_modules/.bin/babel ./src --out-dir ./lib --ignore *.test","release":"yarn build && npm publish","test:unit":"cd ../../ && ./node_modules/.bin/mocha packages/material-ui-codemod/src/**/*.test.js","test:watch":"yarn test:unit --watch"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git"},"_npmVersion":"5.6.0","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"10.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.5.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_1.0.0-rc.0_1526238743198_0.4982949032931223","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material-ui/codemod","version":"1.0.0","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@1.0.0","maintainers":[{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"kof","email":"oleg008@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"rosskevin","email":"kevin.ross@alienfast.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"a0a96dbf9f3c3f18e092ecdb6b1b8c31420d6681","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-1.0.0.tgz","fileCount":18,"integrity":"sha512-PoL0cfX08t+gzL4hO0nQ/N6Ub+C6KEvbXqWECpviXMku/KgFp67m3dxyBDD8ZI0+rQMQrKN8V+aJLzKHYf9U9A==","signatures":[{"sig":"MEUCICPFN33jZCy5KdJtQEifDrCF7nxMbAcAKOA6wM7QcdgGAiEAilPMhX1fE2rNH1c4iZBLOYys5cbFlaoZ2cNB7hOAJjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":38160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa/fzUCRA9TVsSAnZWagAAfO4P/jHV/PpHhBJg0/yAfDfa\nqBx0Nhz17Dffot2nF5qoquxUjuZfjrLjWbn6hCsw3iMpEbSPfQ8h+UqDKExG\nfKugx2Vj8JlVOcX5VydWDF7ByDeVb0RYRmbr2R1Ax8g9BCN93UkXuge5FPOd\nG/RrDNrswPBHGyUj53C6Jwt3A3DrU+Ejd4BmT8hQSUnkmRCQxs4gbKOafJSD\nEjIzjoHVxsCfClqYsf6/etfKhjzjJEkxH5E1D2TlgQehM7vVbFx1TeITgdoq\nZh1a9YAm0YJ0XIJqoxEN+jJ2RnjwaXA/eTWA4VddwSLSOhpjFTvc15wkfZNv\n6pkdvUP7wcDQha2rzCVrWvujsf3K1eIdhcZxltHarMOVkjDASViaAvIzEHA7\nOqJpfUqNp8snHPh5Xy76zPfVW+fkIKG0mnDY8qmQsyMeVtspihqTgZL93UrW\nrLDR7q0ovCVJIKYW4wNMcqsDEGxjfwhpaQ/JxLHK3CZ9lnb6GmlnOYBkZdQm\nm8A3dVrh5dhp+X/kdsiALneVA/7k5oDAoh3LZgMOR1uw31qwQP0QrjFcH5Mk\nHM2eVSey8waX4SfAGDk5h1ownzMMV4FZZ66ZrMM9KfWnS/WIlFon5MCGZigC\nkE+DdVuki+m3LERZrEboWnQm6O7d6D85kMyACntmYUxrm7VLu03Gvtipb6gR\nKsd7\r\n=orEC\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=6.0.0"},"private":false,"scripts":{"test":"yarn test:unit","build":"../../node_modules/.bin/cross-env NODE_ENV=production ../../node_modules/.bin/babel ./src --out-dir ./lib --ignore **/*.test*","release":"yarn build && npm publish","prebuild":"../../node_modules/.bin/rimraf lib","test:unit":"cd ../../ && ./node_modules/.bin/mocha packages/material-ui-codemod/src/**/*.test.js","test:watch":"yarn test:unit --watch"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git"},"_npmVersion":"5.6.0","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"10.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.5.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_1.0.0_1526594771772_0.6848222364601217","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material-ui/codemod","version":"1.1.0","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@1.1.0","maintainers":[{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"kof","email":"oleg008@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"rosskevin","email":"kevin.ross@alienfast.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"0e75b28a086e65746b0203e567770dbb272fe570","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-1.1.0.tgz","fileCount":18,"integrity":"sha512-Ci5mrsUdagSKt0I5TW19DNfyJE0vIAgZVctFt1X8ok5IoVH5Wgqkypil768U19QuWk+esUgDkttCtAC6PDWHsA==","signatures":[{"sig":"MEQCICwRSVcqKtINIIu/fmn4bUtO6/gYDgveGejgib0FJ/nxAiBNKCXv5Kc2DhBWZAOtu9V5atgPmphppJlQ/BFLJ1/tAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":38495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbCXUWCRA9TVsSAnZWagAA6joP/2mdL3UsCovr5L5hawzj\n6zdJXduB0bDa/jfj274RnSTRSlSEk/P18M8CZ5rcgxw1vPZ9i0UTQ9+3ZJtV\n2WCkH1umdRHIs7V8lXg72Vv4DWoGD5OobTe7+XfaUppvU9u/VQgUkza4tdwa\n1LYACD7mwIkkGSgp8a0DxgrqzuoEfPj5g+/3ck/wwoJPfEVzvEqqOpwEFFdq\nsURSJDXMqe1xNFfyXuaZWJlO5qutzgA39QQBZpfArlQ15xEZ8OYh+aP8L4Hi\n78A4uU2JcpHx4tVbgPYNejtFn89h7RLdFHb339GQvFeu/wZsmHanERvJKQcl\nOy6x7dE0K02mngP0ljF5m/kKfzb1LuURyQD8SjEGwS+hc6qBP41MiyJR6hYG\ncCS+9OaYKXNkTNsvErHJw7Il12CuW/PDV9cv6jNzhCXtdcmolSR+oINwtk//\nlUn6JLf0XGUdjEier/TzARuaY2Wq6O324fhI0AC6fnshSss1gSFwIlNix1F9\n7QvMkPbqPXbkEKvtJwIgenVWSfeYeRJG3XU3psmjZFsjXfFJJ5jOMRMiIXnd\nrShphnn3HMmLscWvRlx8RuEy48rO5NfH5xjfWDWOiXwMG9ZrqZvJF7Kp2MO1\nDAvi/eRW88PgsaRC7HB9JnslmpdswYJQpyWnIQ3qBQ/XEm+iXvx0yZBDufmD\nUBCK\r\n=dYF6\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=6.0.0"},"private":false,"scripts":{"test":"yarn test:unit","build":"../../node_modules/.bin/cross-env NODE_ENV=production ../../node_modules/.bin/babel ./src --out-dir ./lib --ignore **/*.test*","release":"yarn build && npm publish","prebuild":"../../node_modules/.bin/rimraf lib","test:unit":"cd ../../ && ./node_modules/.bin/mocha packages/material-ui-codemod/src/**/*.test.js","test:watch":"yarn test:unit --watch"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git"},"_npmVersion":"5.6.0","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"10.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.5.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_1.1.0_1527346454023_0.5628893068332408","host":"s3://npm-registry-packages"}},"4.0.1":{"name":"@material-ui/codemod","version":"4.0.1","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@4.0.1","maintainers":[{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"kof","email":"oleg008@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"rosskevin","email":"kevin.ross@alienfast.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"c236ae23b6a3a5f53f4d57b72f59afc27bfca20e","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-4.0.1.tgz","fileCount":32,"integrity":"sha512-jeD84kwMyoXKu5407MOWbD/Byu0qP43XagnB3ToxBoStKqMwXczxlG9VIcyTz8+n9Bz+s38wCMGfKHYPoZ/r/w==","signatures":[{"sig":"MEUCIAvy6osutUHHW6rb2y2DWSzqELapUKbKWxVTR8eA9ETbAiEAjz3MHFMUbiFhkZHxYy2PdVczCF5fS5SFWSqtk+VT9yk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc69sLCRA9TVsSAnZWagAAiMAP/RFA6Ko00Nk/8h0aU4D7\nVMTUfavJcAflmLFSqtrlm7LQ3IBz6r4rZnC2wHxUvcyonbjp2nhBKQ2jqa1p\nA9VTMxsFZvdjB9rKy+f1A2DFaNZK69h0RQFLvQ0cTD7ihz6H9TBqvsWhYjAy\nD4ijAh79DFS8gvhjPrvhyCONOfYY1Ks0cSdc2ESeGbWAGR5//J8+AKjxVgS5\nCOCIIP5NfoWA7aPI502XIHHFuIhPOWdRT4CTQNWu1i6JaSwFhxZjRIEa4Wcf\nkzKBYL8dOs0yBn/H0ZxPQVg3TYzfb0Gn2Az/mIPrXPtYqLhYcsdu05Y29VfH\nigQMhNgHkBlMPcYPqg3uGj1O2v0YS8geLXKu+zKBtl9zpm1iDwkoXZhW3wlx\nswjqAKQ41/JC9QtF84umUHzONhE9882pBJ+0nCbeZavYytS8yF9vBuCu8tRQ\nOKBZJJ3qvuI7PNTR4NaayKKc1H1PANVgxNHKl9Uqhyj9GxtZM6xmt9aldVO8\ntrh7QSl55tORHw82a+P/JjDgyF/F6IWJVgVjsGVUZEzRoKllC7MY4Wby3HMo\nmDyD7Qvp73O+W8fdUHJU9AXoqQcPCSRvl/1JD7rxgwrShxnvD5Bqr7+3WmGU\nFvZVYjDwhKiw+TFwRasd5XWWtgTyGq9Ap3+gNvXO/LRoDYk+c6+pou69IdGQ\nz4gv\r\n=zHsF\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=8.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"cross-env NODE_ENV=production babel --config-file ../../babel.config.js ./src --out-dir ./lib --ignore **/*.test.js","release":"yarn build && npm publish","prebuild":"rimraf lib"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"5.6.0","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"10.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.6.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_4.0.1_1558960907128_0.9010203883278582","host":"s3://npm-registry-packages"}},"4.0.2":{"name":"@material-ui/codemod","version":"4.0.2","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@4.0.2","maintainers":[{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"kof","email":"oleg008@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"rosskevin","email":"kevin.ross@alienfast.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"3533fbb02487806a9bd16163ca41c4aa8e4488d0","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-4.0.2.tgz","fileCount":36,"integrity":"sha512-hn1kmuN+j13wbOOWwMM5ziFZvbOku2OdGL7rXk5jY2hoa9hzD1Vd1PTx4hQjLx42nLxoQeynBBq4ZzbKWDrrUg==","signatures":[{"sig":"MEYCIQCJvSopwoF+Kin/ywf5rf4vkCSU0bzovhJx7BLmq/ccGwIhALk67UmzWGaMaLTrnnEmWfDABeZFNuGBWzO7yWB8HckF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9Up5CRA9TVsSAnZWagAAdqEP/R5EtjdXdJl6ZnfdtqWK\nPr4IJ5cjpFS3ZsGtogZhQCWkfKLlEvTutWj5i+ND0jtgqO/oA7Qtw/2Ez2aE\nDvtUQbsLSdHiJ0o3HN1lmSTiMdwIs7BSO2DEnrRaYOPwfG3/AD96U5xEuFLA\n3p+npPOGeLlWNb+3hBGnLRDl8sabmZqt8yXgJWKJAnVjQ+aCMAmfGfCw6By0\nH3gdioGVFzIHo3dDuddT+Qpc52VA9wm4zNpYJnUU/yOXnada4E7DdeUqXPo8\nNXr38HwtnGBUolBqnZIRkT5OfLh79gCk307vDjkLU/ewCyv+A21MfIW7l+4S\nBaETbvK8j+UJ5+q17hayICIsZxB2eSorlZgznF9QHsiZSJfdq10dKESK25r6\nQflGUNriqMX1geaWBSS42SmpD9f9koKokH0P3bTlBW/3dMCp+UO3Tc7rybBd\n7yGT33ArSGB+0fwVwmhN6RNyOUVhiJvCHpc4d9RpNen5/xWb1VDXU9S87xvh\nWoczgA/Wum8rajTUavrMvxenlFfAhd7jONksV4glBzUZuYhtyMSQ5u9TRqox\nZL7DM3A8q6fltQnodMMneL6UlrPiRNgGfmrHg21sFQkdfq3Rj1LdcvqrCo4R\nk6dueGZB7v+yMxXAVL3RzUkiUmnHv2/NhNJtXb7MuoyXW24sS+A459UHKEtD\nYPO6\r\n=Popu\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=8.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"cross-env NODE_ENV=production babel --config-file ../../babel.config.js ./src --out-dir ./lib --ignore **/*.test.js","release":"yarn build && npm publish","prebuild":"rimraf lib"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"5.6.0","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"10.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.6.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_4.0.2_1559579256715_0.16625208606333697","host":"s3://npm-registry-packages"}},"4.3.0":{"name":"@material-ui/codemod","version":"4.3.0","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@4.3.0","maintainers":[{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"kof","email":"oleg008@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"rosskevin","email":"kevin.ross@alienfast.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"f78ef9bd0a44ba8fa9661e7158bfec852f4cbfdd","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-4.3.0.tgz","fileCount":52,"integrity":"sha512-cVyc94VC+3cMDOsJ5PrP7q2tXqfcOpR1kx0S0SCwADU67RsLA3Qq0RwuqEk7H2Mp2XJr6xXg+U3Aox8WhrntkA==","signatures":[{"sig":"MEUCIHKbIr3a3XPq2zxNeXXMTe+xUzr4Y+z5QyZYOzmrYyEHAiEAzVk8SWGjFxPraOjuA116MCLDu+Vcl1UobfKUtGtvUz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPbFgCRA9TVsSAnZWagAAic0QAJ6zup+0TtXi2rt2rSgn\npzK3YWJYCqejzo4/Uug7LSsXSGm8XlXssGH3Bex4mQxQuZJivzyruYFNbWpl\nXwvqoKD4Xy6s+xQWxTGZrio9r8cuUtoZLAxtjrs/XtNqjdpOGY1BWDX7Ypak\n45AK7Wc4oHjoY8hgoW19mJxBJwRG2vZvn7NN7d45/8GD5qH5mOmhT097/fAB\nNY4eZEaW0IT53voNffVhjReoWjF9o54tV6aF113yXo9uX+0A+WQ+KWSwK95H\nRhbwPDA9wOrxcuXCb5zdGjulbWm7gJnsBthsZ1+VziG2wnRF5ZlPCTvwF+VA\nE19Rhl5OvY4ZsBbJq3rWm6JV6Tb4q5QQAIxEDl2P0uR5G50S5uuE830QBYov\nHhFza+M9iLkCuuEAvHHFtc7MQ7oT7+diE2fQw36vgtDIZhK+XCeFJwTIX90u\n4mmhze0MjcQ6NxAR8YR9MZ89dhDCvK1inAyQO3+TIoFyHlH8ZYIJ6hyAAMQ8\nEBHXxdwQ+pjcxqcdNoJmoQOivT2qfKbDB9G++rFBxHZjDWK2TSV6vw7lGMFp\nP9FiFpK1LORlF28PD9+YmLg6tUh/6Igfjt5o1JC86OiS6sp3bGz+Z3W8uQJ5\ntP+atrGjnIBEyCB3u96qWBUUBKl85alBgtNZoRUyzWgKzRdpW6Nu3ONsNC99\nHQZd\r\n=iTqV\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=8.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"cross-env NODE_ENV=production babel --config-file ../../babel.config.js ./src --out-dir ./lib --ignore **/*.test.js","release":"yarn build && npm publish","prebuild":"rimraf lib"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"6.9.0","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.6.0","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.4.5","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.6.4"},"_npmOperationalInternal":{"tmp":"tmp/codemod_4.3.0_1564324191375_0.8279238886686251","host":"s3://npm-registry-packages"}},"4.5.0":{"name":"@material-ui/codemod","version":"4.5.0","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@4.5.0","maintainers":[{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"kof","email":"oleg008@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"rosskevin","email":"kevin.ross@alienfast.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"e258a4865a7d68506579e046a6170fd742ffdf4f","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-4.5.0.tgz","fileCount":52,"integrity":"sha512-qgx6I1T+kTL6TkbtTu+Bn4NIi5AgQ8SR8R/bXpivKPkrSADCsoanfJrS3atyCi8Sykl0DZiLdXxQOAcjP1rh4w==","signatures":[{"sig":"MEYCIQCbS0ZS++frqiezO9PCB7LlNBEtbFJLq+HZWBDGe0qJkgIhAPcsLef9+6e2bBDJsiasWegTNWGPwe8otDn1cy2EQKw9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlFiWCRA9TVsSAnZWagAAUq8P/RMez8DIa1Ay5roOxf0a\nfY7T/06wUSigHlZHlSYiYA9mWbnVOkJo2K/GXFPeOE6A1ZpQBxSXAnOMJ0UF\nV02BoHmxKAo2DudIUrLuOtF7JYJAFmRJc1SdAkKqBgqOTuTI4jZixUv7N+/d\ndT392gNctYvxpBKI+wFddnERX9c0lti46oleR/AGXzb39b8vwCncGXD7J6EZ\ndOmmvovPaQNyQoMVuSLdzgJx2/q1By41AIQ7IL751P+fYyJmn8YbP6Rc3Tq6\n0qxKEMabke0tTcm8OFpP12MY9/zRVQRSgb06NAgFzi36KaT7IU6o+trN/EAu\nO5m9/M/t2xtkDN1FGp0yjeQ9tjaak4/+hGMIAU7SMgRoWxeUunKcGF/ZfQza\nq5rwIkL5zGOJLAOTP1aTa87dArusHnNWJqZ1LFabQo7e11v/beEeQ6Splhny\nYA2WZp8uac37senpunGKjGjgcwuMG2lqqxeuxHphJ3pTrImHTkFWXDhC+n0/\nwxAWIs/9eh4XRztVy6lyNDIcfSf+NFqIJfROg7i0gC+9h4bV/SazQbnmr2+o\nXc8hxsDzJcG6FcjjQB4gBjGqEcmI5lI0gxZeE8kpyr7BKC2/ucbG2n3+Vkhu\nyT1FkN2cvQ/Lv1ePLiqF2Hfo+eyuAXnlR4vpvYBpOLZIrY8apKs5thZwLOWw\naFIJ\r\n=uXdh\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=8.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"cross-env NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js ./src --out-dir ./lib --ignore **/*.test.js","release":"yarn build && npm publish","prebuild":"rimraf lib"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"6.9.0","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.6.0","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.6.4"},"_npmOperationalInternal":{"tmp":"tmp/codemod_4.5.0_1570003094190_0.5610025221006194","host":"s3://npm-registry-packages"}},"5.0.0-alpha.1":{"name":"@material-ui/codemod","version":"5.0.0-alpha.1","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.1","maintainers":[{"name":"dtassone","email":"damien.tassone@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"0d331d350a2737713b85eea6515e8b7d0f5ac669","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.1.tgz","fileCount":52,"integrity":"sha512-epBbE36ZgRnmKHGYxXpwoUkPC8aWs9BmA2wAGISi2rqTX0TBtTNH2JAJOYECDLQF8yhpF9sD6a852cCiLSs+XQ==","signatures":[{"sig":"MEUCICUrJGRxEmEereeqR28idWJYzvODk8OojKWRrTDTJis4AiEA5YrIfZH82Uq0TdhkoGthJIM3G4vcrLsLEMJYGYZWfKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":109643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe919xCRA9TVsSAnZWagAAYksP/1RVHmW1HXb93E8k7Gzl\nXd0FiAK1MA2yz0wxH93YR4uz4AjZ2sIhKKb3Gr7+5rd9p1PSlwho5dKZgAuY\nWOHEFbQmnymUJiTAu49WG+MpPsm2H+zLHQAkQ+cqExrKft5MOajoGBKFNfsN\nmq20OEvPWqHevgVgVCF/U5G/C8kcnR80kqXIB/e/TCLIx8lltf9yYLtQ28Et\nTs2eDZcMMPmfutYCEz2Fw6TWpwEIIZcvut60XIq0z59z61ZLOvykcb9dej1f\nrUeYrh9MO3SEg6zh3nh2eqwIxIEbiVgvoodAGYRGltCIUTqjsmPmVHJHftms\nXzpk9rU+7LwNtCViQJhZmigGChXIOwswU94oy89mmVmKmrhRQQ5Y/EGdKDor\nS8vRqBzky2ky3/9/wN10Q1MLHiS1GQ71JDIHakdk27UMfTVvvh+DderuecLC\ncCX0pA60sB6NZFoclztUR4jhxjjx21R5hVKpmXh1sGNeLNA4P7NDAugrkya2\nXgRfsg9x+bTEhpAwlbC6WDJdv/4GnoacEKaQJ5rtmi9ihOQUfAg+88q97fqj\nkaH+RPld+gyZAy7aYeqLGZ96SIOBewwJ3FbACamQLapuRFG7csrmYw35DWae\n/NrdwjXzZxUhyKZieS6TN16oCrW/OwaWlsZ304BUw8xCy6RO/nlEnpFlLEpQ\nn5Jn\r\n=jqyE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=8.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build cjs --out-dir ./lib","release":"yarn build && npm publish --tag next","prebuild":"rimraf lib"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"6.13.4","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.16.1","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.10.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.1_1593270128882_0.6559668697552623","host":"s3://npm-registry-packages"}},"5.0.0-alpha.16":{"name":"@material-ui/codemod","version":"5.0.0-alpha.16","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.16","maintainers":[{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"21f9c385ee09e616cc75e93261178709481e9827","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.16.tgz","fileCount":64,"integrity":"sha512-Ebj2TRpE5g4CY1y3UrGXlkAGLL6Gee6PIkTLwiCAL+cfKIGyOVUYss4/QN2kFrpCIPAZ1YJCSg9mC1pI1zJZNA==","signatures":[{"sig":"MEYCIQC3Wh5MnSjYZjo8MIBhIxYsqq16GauTETASZv4jppcoWQIhALBbFncJo6b3CmsIq+DVr6gE3sE6a7C0renDuhVtdiiS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":116774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfr8cKCRA9TVsSAnZWagAAOnsP/0t7L5X4fvnQRqmDy4tJ\nUzBMmQJZCZEeEhvJhpiqmaGfaUZa+17yw83ftr/ZRdcfz7UVo2R6rsHqKQ3y\n/xFD5lGzHGIjyJF7N0CPJ+iU2mSpPi7+/Hu/SrkOJwVvNeHNhXpNWCdJtfbP\ncS8w6j5D+nkQLmzTyhPW8nIXW4rf6oD639PGTBo3am/4rch25tx4gqz/r9Zg\n6HT0I3ZbzpFh5MVIlF7e7SCEXHeN4kQs2pVmCCvbj5+3Ofho9pO33YVWEbxw\nuh61Ox3ZTftQ/O+rowb/Xfl+8Ht7GRWAtlXBRrcU3JNoBH5XLGwmAWVNXm8G\nlSxiCKQsqiQ0jDPWl5xtET0RN3/mQik6Qmr3PEfM2z5RW0iOU3188jS0T2YD\nV+qp93eWCI5wJNPX5Q4uGqMKhKJtolyyWgaP8ITcqSIFDT5vb2wg2dKNr3fI\n0rSeNimCATKf3ZHSu02VheONcF2KTapUp+azK1ufMpdGUpFVLZTX7cX2FmCq\nlAgpAWF3IKHWGCFVQjb/WpnJDwJeab8VDqOACd+hKFyUTHbMeNJt6l8WeZ1j\nb5LvMAbRcVxuX8+Y1fnhC+nh4iHJrZAO1HQMGYxuxMxFsWFnBStHRQtt8+zh\nyBKTSGju9JxAf5f+EknL3xR50RhG1EDzj0nUd18im7vQL3R558/VX1fFX1bc\nXG6Y\r\n=siii\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v5.0.0/box-sx-prop.js\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n  -<TextField value=\"Standard\" />\n  -<TextField value=\"Outlined\" variant=\"outlined\" />\n  +<TextField value=\"Standard\" variant=\"standard\" />\n  +<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v5.0.0/textfield-variant-prop.js\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./lib","release":"yarn build && npm publish --tag next","prebuild":"rimraf lib"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"6.13.4","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.16.1","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.16_1605355274333_0.9485248472501979","host":"s3://npm-registry-packages"}},"5.0.0-alpha.17":{"name":"@material-ui/codemod","version":"5.0.0-alpha.17","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.17","maintainers":[{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"514593ea0d1d6a0074558209534df0d047319967","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.17.tgz","fileCount":70,"integrity":"sha512-HgMquLwP469NLRMQA+i+LqhWKW5IDj2//b25lv1VIDTpS4qp2nrQvYFpPwBr6N3Vbz7Fv6nSqgZMB2eIeOPJ6A==","signatures":[{"sig":"MEUCIQCRub/qTQGglYSzE8OkrB+fb/voxwEvuCj+AWRmF6uI/QIgd43WZKJVK/VlzHiZGc98RrNBKyLVwHtgsGfVftEjepY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuv8hCRA9TVsSAnZWagAAcvkQAINdw7nYDwGGptxnNojM\niZrI+vJlXX3axbDSBoim3FJ7Ietf+rL3fR+UMZhr16pB2IchCFLClM5k5qOU\nNIYAlcseJZX+PTu+uOT5lm48WYa4R53eSLEpKYJe16NxEJqMb3jEk19BqMWX\noj3c7Qbvf8Lul5lw0SqlTL8S9eAX6MBVHpunv6FJE6O9+obULdZHtICqBk9r\nRTjTlfnFyYJ/gZFAvXAQgrAmXYRmJL/fERNpOcT2VrUOGiqsoDp8hu8/eCkl\nfMbmsafhHxKGpT9BKPT+s3soW1Q/JFxYwz/Ut6BHiZaK/YspKAJjdOJZt6Sl\nOQXDUn5VM+jzjfhJgCECBcKxRXHPv8wRLkMZgQn6J2LSGoySvTdYTHuFI+ZI\nPZMEqfp3k7XWfVTJf6+2wW61xF6wzvFYKuNxqU7e+0bHCRdmYFx4NumTkW9T\nxNFEj6HrWlIzrx04oy2uBpUlWV+VmcW82Gr53To+VxAJEUpGKWp66AUNXoSO\nca7lLpUBIe8zTJzhJxNH5PHh2NRtWbg1NeeLyDxBDbGugcqjgWGuA0rxq1Tx\nSq7974lNFLrPZK7/UYIVOsxsW8G47x+q0oJ2H+J9dxSh+xCoy5GVPpZ9HzwE\nuW2czAYMB0XqFqIc6PeUp+3wF8TFZCudjCm5IClfFBM7fZVCamM7KHqsnpdG\n8oku\r\n=s0wy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v5.0.0/box-sx-prop.js\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v5.0.0/moved-lab-modules.js\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v5.0.0/textfield-variant-prop.js\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./lib","release":"yarn build && npm publish --tag next","prebuild":"rimraf lib"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"7.0.11","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.16.1","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.7.1"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.17_1606090529447_0.8329075345504602","host":"s3://npm-registry-packages"}},"5.0.0-alpha.19":{"name":"@material-ui/codemod","version":"5.0.0-alpha.19","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.19","maintainers":[{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"03ba15b8d0c0a90e5be2888325b773c414b5c255","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.19.tgz","fileCount":37,"integrity":"sha512-ugp2dwDv53RaWWumykBZVTXr3rofh/9C0w5NC1txD9mTytQpBeFvbFTGxz76nRN5CdRB6CbemvaxNCwdJ3eHQA==","signatures":[{"sig":"MEYCIQD5hBQJdv4AKsvTVd6iWPvVnDw+suN4L5m5Rh0ADN1cNgIhAPFHemrQtAEv7M/r6iXzori1qpsGlczIlt6ZMCYODBsN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1k10CRA9TVsSAnZWagAAjYcP/0eKaxlY/dfchRqAfHYc\noAb/wAJxqIrKt6SIKOJlZ3pw69IC4qfomP10VJVts9SemmQrl2yWyqkbPzne\nXYnRiR8HW9bo0PLNtLa833mZ0dR1FVc8BX6/WkcYJ/wx7vTk3OtPHEN/U4E6\nj6d9tIT9ZbeAdSyUxsnIREzUbu2djTx+Acz57V8yuhoCC+8W6urz+10/v53v\nLYUekpSnofwx59Yt0Estj7wS1POiNkvQpwDMD78clLAffGGxij5J86LFdJsE\n3aLXvQWYZfHNdb2BZUYId9Ko38PlMRiQqB8mWmVh8wfG5K4cusI/PkudjrWA\nDJ4K8mhS3HjD3RJ++nEuFFfcTKxCFt50JxLLZs/mzoLhBShk4HwWw+CHkJIS\n/jzUOG5ra6vrYGK+OPt5uWncKnLtn1IZUD08Zoktu8K+GVljW5cWyJ7hVGVc\nEN7ZK1+AF5rkbuKzJb1AfrJQdCe4eiDL8nBkmvuXBCe9aY3iIudhgJSRcQ4n\nC/jJ39NYjmCoOrYqsRzgIireO1rssXx4xm7Wq4HGPuJ3VBQDkQMNvOqqrapv\nRQ1GTc09aHKgiWmiNSK081sHWT92TCoZiQCRyk3xdMdD1QToKZnsoIwHS88b\nsWVRDa9vLAnjCNZAf6BXpEw3zFfKUkEelfK2PQNkNXtPDpeiX0J09e9j8NHu\nJLQy\r\n=6q2t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/textfield-variant-prop.js\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cp README.md build && cp package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (darwin)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.16.1","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.7.2"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.19_1607880051625_0.8264836902832342","host":"s3://npm-registry-packages"}},"5.0.0-alpha.20":{"name":"@material-ui/codemod","version":"5.0.0-alpha.20","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.20","maintainers":[{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"5296a10c349b715f86afd439246f6fff33098322","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.20.tgz","fileCount":37,"integrity":"sha512-4osgYvhh6p7Qqp/SPmKjLwFznqoDwOnra7gd3okpELKsD3NarGmU5ARnpIuhWlqh64YDkZL5LfiG5c/YOPE4sA==","signatures":[{"sig":"MEQCIHWtwfJSoe82rYj5Yi7ZcbRMJkXPbryh+hmIoJrx20pxAiAU6sCMFTUbyoalKVzGTc+hQ0ZOrIsaWZquqEhzexzM1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4N8wCRA9TVsSAnZWagAAImkP/iE3dmgsu3Ix9Gikqsp2\nHlzzMVzCAhPGT4RJUP3axg0DAkY694UDJ7LYaFFEALlZ7qxZWQYOmj3THgYt\nrMTlN9H3uI6Nzd9aB0pUEBfADlI5TH1zhwqerHQdpULFJibnK3VPio5Ss0fB\nto1w9q9V4Y1t8/SwVF4nmEViHnk+ih6x4jhTfs0qU1o4zbd76+/bLfOmviSL\nI2/b6F8N+y2yep3MO17OpRW/a/hsQQ5e6DTsLuJRzJeNJ4GbTUF/5jm3SPDZ\ntVEPzVojcs9BPRhVL3WylNDDTtJ8yUUuFX31KbyIKPdlhjubdi8flR2iJ4DM\nxAqSDwouhEtVUmUBcBo0zzfd7BGPSTgm709F7xSz2TbStrgnNkjmLhom1YAV\nndT/KxLoGD9d03i7LtSkcww+nAmwiFB7g0kHzzdciCI/l9WHIoeFi0sbvG+w\nsOg1TwKQ433CmMifaiBOmwcuFUw52DDkhPgZ003ZDGvEWsoDPdQdK77eJs50\nAfrodAdajJz8dlnicsEOSCqRwNlyGkGaHyU227vkMbLuAiKxtCKSu8aA6qqL\nsRy43RZQhMiPfrqA+EE9jT8hhRumzW5rowCA4YJw4FYy47IHtH7dgvu6VjmI\neguOQoUsWvr1Uann8wfUiWsQCIju5iqLEyKvKu1dc6kLFMQebyl+XIgZKAAF\nb86d\r\n=64uw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/textfield-variant-prop.js\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cp README.md build && cp package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (darwin)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.16.1","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.7.2"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.20_1608572720112_0.43574333093695494","host":"s3://npm-registry-packages"}},"5.0.0-alpha.21":{"name":"@material-ui/codemod","version":"5.0.0-alpha.21","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.21","maintainers":[{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"fee9b776182d80a5f856bef7998479dafd3a8f7a","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.21.tgz","fileCount":37,"integrity":"sha512-KLVdRlAvTsMXXQC31d6mPjzjmAfy0Wy4SqbU2KfJDRPZhIaQmgiOd2sExiFiufX5YiosgbmtoOxhKeqZOUhN/A==","signatures":[{"sig":"MEYCIQCEzd0Ab0bB0N2HtvAmvQYRGfN0IOBVSzt7g8Og3ZRTegIhAM18uEaY02HXkJhAV3fgdm5LBf1Jc3YrOu6Sgubzzysl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7LnWCRA9TVsSAnZWagAAFusQAJ+QMfXElHtyE+Tv80Nz\nu1byhI9n5lzOfXZuMrTV2wau1youKZgHigjxCe8DRqlXzqTg27cOEg9/KkzB\nY5gk8gHxiB1vwREI6n5XwYRqZu7e1RHKSU+TiOednkE5qZwlcTthcd6K5/KW\nw93BDvwQJtcIeTMuDDLzJQqesIQmIhI9SjFBuyqrJHGIaUSBaOiOaoZ6GBor\noRZ8Nq1TBz2KpABmGzCpQdB5z/j7mhsXaNOZrOEv3l0AZ0Zmxmnl8Pq55p8x\nybZwLNTJpyJz0UC6j0LRHYIFPDoLxJ6FG1zRr2ZQdsHvzpXnPHyWqhT3WCWW\nTz+6fIRcywZoFf/J/Siop3/yKd7kFs7gKNGfgOHaLLKruRFyIMtGIb/cqqAT\n7M/fHKC5GcRO+zJQVTxEWJ49BBv0XMRFyc1A2F3wu2dFqMstvFmmtwoKk9uR\naodC84Yz/mwL2LHpcLgDkRJjAV2zt9zavm9g/HwYa5y5tNpEWZMaUBdiJ3tZ\nooacUapOld/QfzbdLGOKiRTB6qu9H++BA0tU8PjswgC1CRxquXNyGJJtENQ1\n5H2aka/X71D7/Pj0uiSXWCO86DrQigD2+FEnJF5nnjYvbzmf4zSw7aCVbhqc\nreYkfOcOUxguloK/IkA1s3Fh9PQxMsJm2CqU145HW+BMILiuiN4ijDKpE6S7\ns/lM\r\n=i9KR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/textfield-variant-prop.js\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"mnajdova","email":"mnajdova@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (win32)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.7.2"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.21_1609349589788_0.588990208221118","host":"s3://npm-registry-packages"}},"5.0.0-alpha.22":{"name":"@material-ui/codemod","version":"5.0.0-alpha.22","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.22","maintainers":[{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"156fca840411bc1ee45e7b639c6ee3ee628490c3","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.22.tgz","fileCount":37,"integrity":"sha512-7XhW65KAzprxBlhYM434FGSmcwXmquntj+8u+spgYkS+eQ7TWIOOUaCnFb2oYDhEq8IDuY1lQ9gH4enGHCV4CA==","signatures":[{"sig":"MEQCICnGn7vn53gxe+WnNPH868GGi8petPQ3zp+lDldxjfDBAiAf24DkOlW6FhoTDOwYMvKfVm5BPJkjQ1sH8RA08k1Sgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf8vjVCRA9TVsSAnZWagAAI6sP/1NWgUqlBnU7RGSUm0NB\nV83at6028AWxp3NpU1xW1F4cfrmjDRAdFlbkHM5GvNYYJHklFDLLdsxk1cQI\n+76Q5156Lv3bLeJTTuueUNunInjOk6BHtwNKiKWL0fDJ8LArAAwhFjzkHz/y\nj2x4Hmicd7xzG1B5fOximGcGIt0JiP5rtIJKPM0WhJTnSfenL4HF/ufGDLnP\nkWJGlmYtavUqjD8t2SvLj/kGruAFXu8gWgMdfMieRq071oAp0SK/CVka08c9\ns+au0SJswHZtfYFLMdy1lgCZx0QKuzORN2jmd4C6iDfyqARL+6Oh7vKONvcG\nMEmLxmhXVFjv/NRZqRQeqTnRs+yDTq9+sAOP0JXeWW68X+j238d2HQNGEjbW\n7XJEEuuiTAxokc1ADarRRfSQ343U6UcuwgzvEQvoFEtC9VDAwffLJv3HRYX4\nDDNiTCZWwJ4ClaRMKXv+75OWGI44zlXo3hVznfRfrRTMoaXxY+OIPiaMSJBs\nn3cmP44PvSUEFl84GOWvUOci0vxYBr21gqevN7lTbtSe41JOSmbeHciLRwOb\nLxUIiqFbeRzi8WKuyET2qD6V2b0ETSXvPxzjq9Dra8sGi6y83oUtTUuwhSMs\nTCcSUpgEDVTdBlRob8CNsGtPthss+juSdK/r4XVrnvhiRfLToAfyKrdc/mDP\nN2GR\r\n=siaF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/textfield-variant-prop.js\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (darwin)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.16.1","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.7.2"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.22_1609758932446_0.8434624359996148","host":"s3://npm-registry-packages"}},"5.0.0-alpha.23":{"name":"@material-ui/codemod","version":"5.0.0-alpha.23","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.23","maintainers":[{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"e23cb5e087d89d7e58252d286a01d5830891e24a","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.23.tgz","fileCount":37,"integrity":"sha512-6aQv/Hslq/9RdIBqFGj5QnTx+Ag4Sehy4DoeusvzJMrbfKm644MtryPLNdmEKBoUyfDN6pwJ0eVFWxXWiPnYlw==","signatures":[{"sig":"MEUCIQD4C8pEaPF6h3fdXlOhCM+J5dpAXRxzbKgxy/mcyx/dggIgAdLebq2nbARKpHyn95IJDny/XLFVQfpv5Fr81fynUIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAD3nCRA9TVsSAnZWagAAdr4P/3AjSdiYxR6UjGe4c6TT\n6eIZtfDj5cHoVXFV7DxrNN3r5nIvUMdjNhGai15+/kmpfAdC0/mdt8KQ8/30\n6rX6x5MKn239k9IdhMtdQepnEJhWhAR1l9zDwYRs3WMjkDs0tAyHvm7w+EV3\nDq6v5XgWFdH6MWnqHM+SnPoIUMAa43vah/wC6dBUSIAqMUfwGSAilPhDRNKY\nv0SMOUfJcJVMQKLCYlTT+tmohOaUCzg6NK4Ro8e0/1aOOhqdw0n/uwogbClx\nmdGcQ2oXJRR13Dof3jl4vPcO8SGs+p5jJlGjlS0ydrL0JgF5f0Rpjht+Y2Cc\nSiD34JRuw9S+WehG2Q/oZijC9Ah5m4bDYvCGW6apZp1SwHKHWV2wUqhAYtAz\n2j5qBhsozt2/UPcLD+T6Ks14dGrfAs7wq6nBySIxhzBmrJ14B8ak++Qj6LiN\nRoBMRLmv9jfH+/jGaV6inp1mNtlQ+K+Ys+fXC3C2FuTV4Op1abePhxPTaqjN\nSwd9/myJAyz8QkdTHLy1eY2daljlePmg29ZV9z2ShxFYvU70wKow8Z9ECKhx\nT898x/IPasmuGnRLDL2tof3sUOUjgTdqzPX6QZ0Bs/XwULoDIEP+Y9ArJXDK\nBd2Bbodklq8GNs62KDk32ErUVIuG5z6R+tn+U0hW91NfHzBLZoBHMep9gBc8\ngQK0\r\n=WLDF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/textfield-variant-prop.js\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"mnajdova","email":"mnajdova@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (win32)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.7.2"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.23_1610628583359_0.42860309463229607","host":"s3://npm-registry-packages"}},"5.0.0-alpha.24":{"name":"@material-ui/codemod","version":"5.0.0-alpha.24","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.24","maintainers":[{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"a64f1b33e5adb392d518d3c9ce6c88cf30b23404","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.24.tgz","fileCount":37,"integrity":"sha512-mudNJJtp13EM8QsDWMb1NJNWWGG7jxzH+fRFx9EaTOOC1KoFP4Qz4qas/Osru0GPgnJgQfFy9C7VOp090+nGjQ==","signatures":[{"sig":"MEYCIQDRIGLT+b1j1hhSTqyFh/knZFPTnZezZO/xjBOO+eq3YAIhALcfJpPRb58zcJy8x7Hd6UjB3aVsSYV7kNUgb79eVvjK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgECJWCRA9TVsSAnZWagAA4zYP/jEQ8Rfti5qBKMwbWb++\nk2pD64yW0+w6ZX4gZUbMndS8pXDZaYtiythY4NGwYRnrJU8TOWsq9ed4zMkZ\nmKu2veJTmF6TvkIiWJZ8zPcfbfAy4muehZURJlwmYDnfm8yM49PDOq7N87TG\nNHaYquTg+qrI1Gd+CXwIMr7qOLKsZMsXP2HsJAVkvHt9o7lKYimS/hCiGjxj\n9K2zPt4WafUYOYsCdgOKsEiXC1Ik4cs6CRAf3eNRcteDRxaZBbmBAUs28UDm\n4633TLT4LndVVuOL9Gl+Ji6CGDXam3CUuFPMqb5JhhLNHj1Cc27oBWNCTC/A\nVh2ekzafvzT8rUD93OUKQBJAQreC2tLdQmsTFDRkm75XJAvkZgKZt7uya99J\nGNQVmwMXtIs6Swbra+dJRFw1ny2/yKt6+AWWvADbyUOWQ19YuaYJw4im1go7\nqC/TvXYZcc1ZE0NiQA+IMrhNJgMWcKPBBXPnyE9iomXhy1p4TRUOXZQPcVZ7\nPDw+JGoIkYcAeCcI8Vi206ZNftKshjsAWHcXo/sKwwIVMi/m3zLS2+0QRHgG\n78TCZMiu4Ix5cs/oD2L30WanySNNKWZcoLHymxMgKyru1rxT08V6OCT07Mte\nGBoqTLLQC7JjUj4SFdpBWa8TSThJaNv+r6el8hH8aPPzfUXSXASSAFRpxkRY\n0qn+\r\n=6Okl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/textfield-variant-prop.js\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.7.2"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.24_1611670102298_0.6010687990646859","host":"s3://npm-registry-packages"}},"5.0.0-alpha.27":{"name":"@material-ui/codemod","version":"5.0.0-alpha.27","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.27","maintainers":[{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"4ee70aeeeecad33a31eb4ea09f32bf03e4817a6f","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.27.tgz","fileCount":37,"integrity":"sha512-D+PPhS0CIFSuHatRelYZBBsDCdjk8Kk2Z2AreiUdB2R2SqJq/1fQUdIuswydl6xoPVrquZ/cHONTloX3sraULw==","signatures":[{"sig":"MEUCIF43lpgT+tcL2E1w+WRrfijhreYw/qMszRZSBvAv9+acAiEAqK/BfWFKGRr4FtzW1k7faTF2d3QtAcX/F/EeHcd9HNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQiuJCRA9TVsSAnZWagAAlKEP/0R3bMoKcSpFG1/YeF4J\n57mD715lhWxJg7hu22CU2OkMnkOSTEemMFyDfwIpnw4H53hbBaXkl/3/SYem\n3d7COabBB8cw4oOuVw75bviqqtLVIHmn+JLQ4HKkZ608zuV4MG8j9H7Ww4ah\ntJmhxSgOLyyLtIgX5KGiE5g4pyvt+sZoBDywfO2iHsNM8p2hgTmIB9x31YaM\nBCCGYHMBDhgt41Jmqmml8Ye8qLcuQVhTUP5BqSpi05dFT0jUTjI2ue1v1Pgx\nPtvNsKbl42hWzUPSnH+IaN9/swjcwcDed9sJg0/89SH4ZdmgacsIOUfkmv1g\nUg0299gZlwIvA819+BlG9Sxn1UeNfqFNcd2r7+hEvQlMQ4OAaapAj1bDcMiN\nmYHFJyakPG2T0uxmUihmmfYkd6zfjvIG8FVml37U/5afI/jQwD7gl5t/+kXh\nEg9Yv+ejatFJ/bi7zYzzW+qdj91QPMUhkpT/0cCGER1DWzZymHjFUtoXoSf1\n7b0qZAGxtM++u0a6kUMjedzq8lQdoQNK/+zJFmJRVWVpXPQOiTqM4pqKtJrD\nK5jUTvYO00aB5YhGAZlMu6ncHsmMS2WT0z7Dh96EAQp0ZCsqVzqqv8jxUI2R\n7Ycb5NY6Ypz6T4aoUs9zVHgzM4HH/Oos5fY1ekcwXI17FQPwSUwYuHXwvKdg\n0sFO\r\n=9UAZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v5.0.0/textfield-variant-prop.js\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"mnajdova","email":"mnajdova@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (win32)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.27_1614949257189_0.5118430701537697","host":"s3://npm-registry-packages"}},"5.0.0-alpha.28":{"name":"@material-ui/codemod","version":"5.0.0-alpha.28","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.28","maintainers":[{"name":"matheushw","email":"matheushw@outlook.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"1da5ff8fcf9e2ff58e6f46a670160d8bee61a8c0","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.28.tgz","fileCount":37,"integrity":"sha512-yNLQzvLwjpsh33L9d+w7QG2iHXLPrOt4Asno2212wJC7JiyGr7i7HYYBe9uvjuE0fK2lodQ6CI9BArB/+w0VeQ==","signatures":[{"sig":"MEUCIFH0mUeOEhMkx1CBWR1rdQt/IVYpRdWqc2EsKriWVYA0AiEAlsPEQ0QZYsyzrbP1Yf4N8XzS+aW9AUeX1Ks3OF7yS7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":72385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdBbhCRA9TVsSAnZWagAAJjEP/2CfqqJA9EwtgVyEgQg+\ncYutKINeaGESDCcegc802devXgJYTNSFH8unGn68ia4iGtMsyUuyMfHtrl3z\npP31Gs5aL/08IeAAUFAPXKx56BchESau2OsFxgdCobYvMHqoFYEsTISn7N2s\nMKWdDXmmF3Aspb1MVATtNyTC4MANGrnPT1EVj+7mYgVRwDJgCB1VjdKItJ2H\nNciNv82mPfWrYP++RQM8m3xCibJ808xJ71AwguTNmqpa1HI2J2D0q65nvEnz\n/wE4QIc3ONZr22p7SwZM4SI0gB0uLofQmsy+NLlKW4eVUpgb1hsw4QaKnO7E\nTiCkMWU2W0h8mNG6wel0DODE3gGAGAxdWTd0/FO6z02bRzHjXA8Spz+DfQjF\nssVmHrWdFUH4E3mdALuzIxReAVFtn1vX58qzlssSJItZfrKT8K4FIm1jOqDV\n6DPdBZ/4nbpx91KYqBL9yZ6ipzlL1mmJH9bRT1ARl6GFwBl1mklATevTBgAj\nP0dcD1JGmM/CXupKtv6g8YOJbChzUGwTbf5g7rYxRli8+e1W6XLVCe0N6cR+\nOes7ExRwGbuspqo4ON0NRUu7yi4ryK7fnc6tfAf4Q9zfeCHU3gqfoJlp1IJG\nHooN4HAeSYvlUFpmwBuqcSpc2uEHzjCozbNkewy3E4zWVj4l9J4Uf5bUeUCf\nrB3Y\r\n=4ost\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod@next` <!-- #default-branch-switch -->\n- `npx jscodeshift -t <url-to-codemod-script> <path>`\n  - Applies the transform script specified in `<url-to-codemod-script>` recursively to `<path>`\n  - Use the `-d` option for a dry-run and use `-p` to print the output for comparison\n  - use the `--extensions tsx --parser tsx` options to convert TypeScript sources\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js ./src\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js ./src\n```\n\n#### `textfield-variant-prop`\n\nAdd the TextField `variant=\"standard` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/textfield-variant-prop.js ./src\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js ./src\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js ./src\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js ./src\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/import-path.js ./src\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js ./src\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js ./src\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v0.15.0/import-path.js ./src\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=10.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/4.0.0/node@v12.20.0+x64 (linux)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.28_1618220769090_0.1733196083294426","host":"s3://npm-registry-packages"}},"5.0.0-alpha.29":{"name":"@material-ui/codemod","version":"5.0.0-alpha.29","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.29","maintainers":[{"name":"matheushw","email":"matheushw@outlook.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"60f52dd91ca13f5d85b05a149d9d7a4e1dde9bc0","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.29.tgz","fileCount":37,"integrity":"sha512-SGNUku7KG4RBRj2yexWk7r48MgFI7gM+rV2r9YQxDwzW5SzXMzkXcJ85f/rlHK4N3C8IgowKpLfG382NgaCeEQ==","signatures":[{"sig":"MEYCIQCphqvGjNGyzsci3mfAAb2AioqTQytH8gssIJZLSKOatQIhAPRANfGZmWau7vBVcW9Oe1XVQucaqAwoLFPyMtWwGNMS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgft3ZCRA9TVsSAnZWagAA2yoP/i20TZa8ZXBkT/97mQ6b\nTz2YXtIrHqrXoFpoxY763e8xa8FmB9/2HaZ6g+Fq6WMaCjDnxiAmjiIpbcGq\ntC2qEESXuAufVLLjQK+FDGgqrlx7B45Kg+B3QGPT9kBrec2JLoLRsS9TUshE\nTA7F+i8LIdtLfHHtpFP7UEyfUaiseUjFkWYZtuYCOJXUmzNtRyf0wsQ/Qql5\nP4k7M45X3QvLtKGPuE9ryVoSwA/hQCdpH8puOyiAmarADtsKP3hJm5YO4Wr/\nLDx+gr3UWfcP8CUGCwYTQw8z6K7Axke2j0gRZ0hNsRHheMnCSu2hXVexh/SW\nlsLnHa+2BnY5Wdr8wqmrInjZ88aYNc8nKS5nn5YNviuGOgjUK8fC+CGua9ch\nRVQdNHVXsmdBIyhd1ACJc8BECrlmJ0Ia1Xb3KfZdm12BhK+kf86ke97Q31Fn\nf1KDtvbvA12J0rhe5IC9RL9wH29os6Ya0lxEnMs6XVvudT3wifF9SLMKrtcp\nE8xWUaDlR2iJCJtZ9kbkBVMzTKxAZnEfhAVpQ5TvfwRiz96WUEeblZceTLRQ\nTLK9RxycATZVuOWELIF6mHskD2/d9iwwxMPJPs74M7kY22p9+gRkDkYjayjN\nN6mK2LS6nmYJ3uk7huLKevMZ9c6SddvcGp/nQ0Nxpp0qW+8LmfQ23s89sVdK\n7B8J\r\n=DG7O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod@next` <!-- #default-branch-switch -->\n- `npx jscodeshift -t <url-to-codemod-script> <path>`\n  - Applies the transform script specified in `<url-to-codemod-script>` recursively to `<path>`\n  - Use the `-d` option for a dry-run and use `-p` to print the output for comparison\n  - use the `--extensions tsx --parser tsx` options to convert TypeScript sources\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js ./src\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js ./src\n```\n\n#### `variant-prop`\n\nAdd the TextField, Select, and FormControl `variant=\"standard\"` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n-<Select value=\"Standard\" />\n-<Select value=\"Outlined\" variant=\"outlined\" />\n-<FormControl value=\"Standard\" />\n-<FormControl value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n+<Select value=\"Standard\" variant=\"standard\" />\n+<Select value=\"Outlined\" />\n+<FormControl value=\"Standard\" variant=\"standard\" />\n+<FormControl value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/variant-prop.js ./src\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js ./src\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js ./src\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js ./src\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/import-path.js ./src\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js ./src\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js ./src\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v0.15.0/import-path.js ./src\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=12.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"mnajdova","email":"mnajdova@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/4.0.0/node@v12.19.0+x64 (win32)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.11.0","@types/jscodeshift":"0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.29_1618927064707_0.5165607546035451","host":"s3://npm-registry-packages"}},"5.0.0-alpha.30":{"name":"@material-ui/codemod","version":"5.0.0-alpha.30","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.30","maintainers":[{"name":"matheushw","email":"matheushw@outlook.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"7c81b0f13d88543141adf84d9187f641050782ca","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.30.tgz","fileCount":37,"integrity":"sha512-gOSCQZvzojxUNDhUQ1HePkhDL9si048VxW3F0o2oonGoKL//+YFEdX5mTZo7GBKOlXDOiZ+yqC/RLqZdVrjIBQ==","signatures":[{"sig":"MEYCIQDQj1NIaKThz+IVpTFYVTd/JoCPDbz9ZHzLkE1me8IzbwIhAJjSivy1xSWPBWoekvxtpajewD3SXdrdeCZI8pV2iGnT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiAqdCRA9TVsSAnZWagAA3vsP/3IRqW/DW2F7Mr70uDPe\nJE0+eNb31SFE3mPz3gmD0/fFuvHHxKozJbXlgerF+43aB5r8POn5nPVISdqD\nJAqQfDkvn9xtT1+x+Fsle/5NmMoiEMuUWH+BcfosDHBG2HXPk8BB3OSFNHQV\nbnBP1BapRqWTXKag1uun7zkl7YrlgU0uTozCGVdib55WE75IQm4P4RxE4G+r\nKPJmLKv8dwF7w+t5Cy25J7XbgJMzOsSRpw7o1/SY52kGSy4MXb2mvGYzuNEJ\nC3yLZnNRmzdimqW3sYVvqrhOES7g2JZHnC7Hu4knn7aSPfjtGJquY1KaxRKG\nhZ2viGdAWLkVDex1lxOydOISzAEn4XGcKLNBqEt54pAe6uj/XAjkKAoZyBlk\nKax3ySQLOPpD5XMvzb9Wgbexiwn3V5uNI9Y1/nJ2FPJAYCiJezmq+jG9K9zJ\njJUeFyUgpoeYWD9P7ZJsHC9GGdNHrkzA7SjKAg9eF1RcpMH75eUabzcEVLH+\nyVgMmaqI5oywJLu5V1AdbZEIJlJE/55ASeIzw/JHxRhp7FE+LNRC5YIu92v3\n3nTo1l0XWXQ7RQNoiBk6wh4Lx0yXPdTPyFgc0BXmNQnHNOK65uEwV5rnJBRf\n3nBG0a906nWka6UkgqMGiPK3uIvHkQ4ELpnFSfcN2oF861hk85GxBAJOImEN\nm7kN\r\n=W14W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod@next` <!-- #default-branch-switch -->\n- `npx jscodeshift -t <url-to-codemod-script> <path>`\n  - Applies the transform script specified in `<url-to-codemod-script>` recursively to `<path>`\n  - Use the `-d` option for a dry-run and use `-p` to print the output for comparison\n  - use the `--extensions tsx --parser tsx` options to convert TypeScript sources\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js ./src\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js ./src\n```\n\n#### `variant-prop`\n\nAdd the TextField, Select, and FormControl `variant=\"standard\"` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n-<Select value=\"Standard\" />\n-<Select value=\"Outlined\" variant=\"outlined\" />\n-<FormControl value=\"Standard\" />\n-<FormControl value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n+<Select value=\"Standard\" variant=\"standard\" />\n+<Select value=\"Outlined\" />\n+<FormControl value=\"Standard\" variant=\"standard\" />\n+<FormControl value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/variant-prop.js ./src\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js ./src\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';\n+import { withStyles, createMuiTheme } from '@material-ui/core/styles';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js ./src\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js ./src\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/import-path.js ./src\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js ./src\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js ./src\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v0.15.0/import-path.js ./src\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=12.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"mnajdova","email":"mnajdova@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/4.0.0/node@v12.19.0+x64 (win32)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.12.0","@types/jscodeshift":"0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.30_1619528348984_0.9850123037964276","host":"s3://npm-registry-packages"}},"5.0.0-alpha.33":{"name":"@material-ui/codemod","version":"5.0.0-alpha.33","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.33","maintainers":[{"name":"matheushw","email":"matheushw@outlook.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"03eed4c1d0f80ecfb9d213f70f49cbac769abdde","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.33.tgz","fileCount":37,"integrity":"sha512-6KIJS88eU5Sa4jrPWHg0KAU7Wk/2k2kdtpfUvwuJhi5K08gf8TvWOwC0zupv0OMKzvBbY9fhgpjnLuC3+AUUFw==","signatures":[{"sig":"MEUCIQCRG/UxhpwgeSXL2qg7/EHpW1pPN/x6SiDNNGpKoUuU5wIgVr6S3gnTjAkq/LWptJlU/dRsPGohNyZ2/2KM+wxKtX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgl9TvCRA9TVsSAnZWagAALeAP/2HzyyHwDDyliIFhNo5F\nWt63GtOCWzUyxDjq2g/5vuoovY8b99bo0REb0w1V3mjdljRyv4jn8DC6II5N\nA8DuyeWxy3abNShlnAFPHQzc4+RBq2Jh4hp2P7h7LohqDbR9e0MmsEavkuNu\nRgmenDtP6g07VKPETsa5XkPHpFy32VJd68/laEe5PiNky2335MDKe9fopnya\niknLh9C7QmmO3dbF3i+Qa0UJQFsxHxCG2AdolJhGOsFqZ0Ye2+EgWyVpGLqk\n0dkLrEYp9FSg8qjP43078WrTQNPk58k/xZv0Cqn5lRSwmzSqM7dhNUrEkEqe\ntDXZQ0rN3p6g+MXomhMWDArP66Aw5WI1uY/t/KSn511pHxsFCscVA0x4Z7pL\nXxiLP1vjvnNcu9p5Sa+dhQ/rD2KYDykdoo1qjpieyUlAv/5G1FF0xcu127mQ\nApPaUuZSM/V+PcOncetvOQ9iVXqJxUB42XYROo6wsM1JlxAEnzRlzxqKTZ9p\nP9dPUu9CY0Qsnxw9Y2sKOqwNUU9Sg9q0re21W6lvb+ccxCYUOr9TFne9c7mH\nb9VbFXsEZbnL3CVBZINwww9GIxE2/jAHyr9787nXYNPzpiryGhPyKpl3r/bF\ne66/tQMFjj8F1Mv4H4ygeWT/wl7iSCUFWWzdB+Zra6BLv4v+7cVcLG79R9uz\ntSBT\r\n=asfj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod@next` <!-- #default-branch-switch -->\n- `npx jscodeshift -t <url-to-codemod-script> <path>`\n  - Applies the transform script specified in `<url-to-codemod-script>` recursively to `<path>`\n  - Use the `-d` option for a dry-run and use `-p` to print the output for comparison\n  - use the `--extensions tsx --parser tsx` options to convert TypeScript sources\n\n## Included Scripts\n\n### v5.0.0\n\n#### `box-sx-prop`\n\nUpdates the Box API from separate system props to `sx`.\n\nThe diff should look like this:\n\n```diff\n-<Box border=\"1px dashed grey\" p={[2, 3, 4]} m={2}>\n+<Box sx={{ border: \"1px dashed grey\", p: [2, 3, 4], m: 2 }}>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/box-sx-prop.js ./src\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/moved-lab-modules.js ./src\n```\n\n#### `variant-prop`\n\nAdd the TextField, Select, and FormControl `variant=\"standard\"` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n-<Select value=\"Standard\" />\n-<Select value=\"Outlined\" variant=\"outlined\" />\n-<FormControl value=\"Standard\" />\n-<FormControl value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n+<Select value=\"Standard\" variant=\"standard\" />\n+<Select value=\"Outlined\" />\n+<FormControl value=\"Standard\" variant=\"standard\" />\n+<FormControl value=\"Outlined\" />\n```\n\nThis codemod is non-idempotent (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v5.0.0/variant-prop.js ./src\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/theme-spacing-api.js ./src\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { withStyles, createTheme } from '@material-ui/core/styles';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/optimal-imports.js ./src\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v4.0.0/top-level-imports.js ./src\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/import-path.js ./src\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/color-imports.js ./src\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v1.0.0/svg-icon-imports.js ./src\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/v0.15.0/import-path.js ./src\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=12.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/4.0.0/node@v12.16.1+x64 (darwin)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.16.1","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.12.0","@types/jscodeshift":"0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.33_1620563182610_0.21055827865984855","host":"s3://npm-registry-packages"}},"5.0.0-alpha.35":{"name":"@material-ui/codemod","version":"5.0.0-alpha.35","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-alpha.35","maintainers":[{"name":"siriwatknp","email":"siriwatkunaporn@gmail.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"18ca2020c07980ae0866b405e5ef974455f6ca7c","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-alpha.35.tgz","fileCount":88,"integrity":"sha512-RaiQgm2YcESbXuXOuwDXLSbXtG1Zx3YyBxwZh0exJXuPrsLTCspqf4ZHLNcREtqkGHyxeZZ61xSKOWWsmIKdYg==","signatures":[{"sig":"MEUCIQDa5zV0GoMZtXcWfoomnmiILYDGBpIKSRnj18NoLQjhpwIgNtW8x5nJ7PetgUkHN6OaBx3xfs6HCdWoOiCOGqcogGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtUhKCRA9TVsSAnZWagAAcpEQAJlwIrFy5hkZzGIeeP3O\nrn+hdH+LUB3uYnF7BqNFk9+D1CmJx9l8IXiTfA3Lisbv0Tx1LSkus0dgbOdn\nl6ql+C2ZUQOz2pb38RZBy6yK/3Duh4i4muYktsugnKHJ/o9p6aQVH2nGeVfB\ntc3IO/n3tcGN9J9RDhRUZPrCw27vyJaWsif1LwEE5X5ddMUXrzfUuluChz7X\nOyA/m3mo6Jby+/ngvXRHhA/iVkQW2jfWFTrKYdmcgYS4hqRvGdkvX1PaDSkg\nJZWrrPrkWLmw77m/w5nIBnwKf8iCeu06/raFlTU+RgxYhGPRJNCe3vexnYWW\nc8km/3sXOsWpR83GCmUnnDcD2bDHX1vW8zjHYpLmGMOXRc2hiVVydYlk9PlM\nVuQkewpOdQySDBqxFnthwBIaSHrkNNTWGRJE2+bmpXJ16wkDFetxjuZAGH63\n49RKBMBXkK1Y9R4jC1FKOyKpYV774WFCCM9CPwqShbo6mvf15tyryJt1i54D\naop8CzeXNjP1vv1YjzcehwJNW+DavvVJ4oZ+cvJ01QW/h6XhfOlOltsFqdis\nmFvdbhY6U9NeQ0fghee5w3WLXZpUH6h74Ua7Vn+Gom1FWKYz3u7m6U4wH7fc\niGbQdk1Fll/TOxkp9P8FB/tetPX+OlIKdZUKs84eqAM/infKx/5Z/IHczRiq\n7PPc\r\n=C2qe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod@next` <!-- #default-branch-switch -->\n- `npx jscodeshift -t <path-to-codemod-script> <path>`\n  - Applies the transform script specified in `<path-to-codemod-script>` recursively to `<path>`.\n  - Use the `-d` option for a dry-run and use `-p` to print the output for comparison.\n  - Use the `--extensions tsx --parser tsx` options to convert TypeScript source code.\n\n## Included Scripts\n\n### v5.0.0\n\n#### `component-rename-prop`\n\nA generic codemod to rename any component prop.\n\n```diff\n-<Component prop=\"value\" />\n-<Component prop />\n+<Component newProp=\"value\" />\n+<Component newProp />\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/component-rename-prop.js --component=Grid --from=prop --to=newProp <path>\n```\n\n#### `autocomplete-rename-closeicon`\n\nRenames `fade` style utility import and calls from `fade` to `alpha`.\n\n```diff\n-<Grid justify=\"left\">Item</Grid>\n+<Grid item justifyContent=\"left\">Item</Grid>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/autocomplete-rename-closeicon.js  <path>\n```\n\n#### `avatar-circle-circular`\n\nUpdates the Avatar `variant` value and classes key from 'circle' to 'circular'.\n\n```diff\n-<Avatar variant=\"circle\" />\n-<Avatar classes={{ circle: 'className' }} />\n+<Avatar variant=\"circular\" />\n+<Avatar classes={{ circular: 'className' }} />\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/avatar-circle-circular.js <path>\n```\n\n#### `box-borderradius-values`\n\nUpdates the Box API from separate system props to `sx`.\n\n```diff\n-<Box borderRadius=\"borderRadius\">\n-<Box borderRadius={16}>\n-<Box borderRadius={1}>\n-<Box borderRadius=\"16px\">\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/box-borderradius-values.js <path>\n```\n\n#### `button-color-prop`\n\nRemoves the Chip `variant` prop if the value is `\"default\"`.\n\n```diff\n-<Button color=\"primary\">\n-<Button color=\"default\">\n+<Button>\n+<Button>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/box-sx-prop.js <path>\n```\n\n#### `box-rename-gap`\n\nRenames the Box `grid*Gap` props.\n\n```diff\n-<Box gridGap={2}>Item 3</Box>\n-<Box gridColumnGap={3}>Item 4</Box>\n-<Box gridRowGap={4}>Item 5</Box>\n+<Box gap={2}>Item 3</Box>\n+<Box columnGap={3}>Item 4</Box>\n+<Box rowGap={4}>Item 5</Box>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/box-rename-gap.js <path>\n```\n\n#### `badge-overlap-value`\n\nRenames the Box `grid*Gap` props.\n\n```diff\n-<Badge overlap=\"circle\">\n-<Badge overlap=\"rectangle\">\n+<Badge overlap=\"circular\">\n+<Badge overlap=\"rectangular\">\n<Badge classes={{\n- anchorOriginTopRightRectangle: 'className',\n- anchorOriginBottomRightRectangle: 'className',\n- anchorOriginTopLeftRectangle: 'className',\n- anchorOriginBottomLeftRectangle: 'className',\n- anchorOriginTopRightCircle: 'className',\n- anchorOriginBottomRightCircle: 'className',\n- anchorOriginTopLeftCircle: 'className',\n+ anchorOriginTopRightRectangular: 'className',\n+ anchorOriginBottomRightRectangular: 'className',\n+ anchorOriginTopLeftRectangular: 'className',\n+ anchorOriginBottomLeftRectangular: 'className',\n+ anchorOriginTopRightCircular: 'className',\n+ anchorOriginBottomRightCircular: 'className',\n+ anchorOriginTopLeftCircular: 'className',\n}}>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/box-rename-gap.js <path>\n```\n\n#### `chip-variant-prop`\n\nRemoves the Chip `variant` prop if the value is `\"default\"`.\n\n```diff\n-<Chip variant=\"default\">\n+<Chip>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/chip-variant-prop.js <path>\n```\n\n#### `circularprogress-variant`\n\nRename the CircularPress `static` variant to `determinate`.\n\n```diff\n-<CircularProgress variant=\"static\" classes={{ static: 'className' }} />\n+<CircularProgress variant=\"determinate\" classes={{ determinate: 'className' }} />\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/circularprogress-variant.js <path>\n```\n\n#### `collapse-rename-collapsedheight`\n\nRename the CircularPress `static` variant to `determinate`.\n\n```diff\n-<Collapse collapsedHeight={40} />\n-<Collapse classes={{ container: 'collapse' }} />\n+<Collapse collapsedSize={40} />\n+<Collapse classes={{ root: 'collapse' }} />\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/collapse-rename-collapsedheight.js <path>\n```\n\n#### `fade-rename-alpha`\n\nRenames `fade` style utility import and calls frpm `fade` to `alpha`.\n\n```diff\n-import { fade, lighten } from '@material-ui/core/styles';\n+import { alpha, lighten } from '@material-ui/core/styles';\n\n-const foo = fade('#aaa');\n+const foo = alpha('#aaa');\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/fade-rename-alpha.js <path>\n```\n\n#### `grid-justify-justifycontent`\n\nRenames `fade` style utility import and calls frpm `fade` to `alpha`.\n\n```diff\n-<Grid justify=\"left\">Item</Grid>\n+<Grid item justifyContent=\"left\">Item</Grid>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/grid-justify-justifycontent.js <path>\n```\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/moved-lab-modules.js <path>\n```\n\n#### `variant-prop`\n\nAdd the TextField, Select, and FormControl `variant=\"standard\"` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n-<Select value=\"Standard\" />\n-<Select value=\"Outlined\" variant=\"outlined\" />\n-<FormControl value=\"Standard\" />\n-<FormControl value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n+<Select value=\"Standard\" variant=\"standard\" />\n+<Select value=\"Outlined\" />\n+<FormControl value=\"Standard\" variant=\"standard\" />\n+<FormControl value=\"Outlined\" />\n```\n\nThis codemod is **non-idempotent** (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so should only be run once against any particular codebase.\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/variant-prop.js <path>\n```\n\n#### `theme-breakpoints`\n\nUpdates breakpoint values to match new logic.\n\n```diff\n-theme.breakpoints.down('sm')\n-theme.breakpoints.between('sm', 'md')\n+theme.breakpoints.down('md')\n+theme.breakpoints.between('sm', 'lg')\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/theme-breakpoints.js <path>\n```\n\n#### `use-transitionprops`\n\nUpdates Dialog, Menu, Popover and Snackbar to use the `TransitionProps` prop to replace the `onEnter*` and `onExit*` props.\n\n```diff\n<Dialog\n-  onEnter={onEnter}\n-  onEntered={onEntered}\n-  onEntering={onEntering}\n-  onExit={onExit}\n-  onExited={onExited}\n-  onExiting={onExiting}\n+  TransitionProps={{\n+    onEnter,\n+    onEntered,\n+    onEntering,\n+    onExit,\n+    onExited,\n+    onExiting,\n+  }}\n/>\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/use-transitionprops.js <path>\n```\n\n#### `theme-spacing`\n\nRemoves the 'px' suffix from some template strings.\n\n```diff\n`${theme.spacing(2)}px`\n`${theme.spacing(2)}px ${theme.spacing(4)}px`\n`${theme.spacing(2)}`\n`${theme.spacing(2)} ${theme.spacing(4)}`\n\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/theme-spacing.js <path>\n```\n\nNote that if there are calculations using `theme.spacing()`, these will need to be resolved manually. Consider using CSS calc:\n\n```\n-`${theme.spacing(2) - 1}px`\n+`calc(${theme.spacing(2)} - 1px)`\n```\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v4.0.0/theme-spacing-api.js <path>\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { withStyles, createTheme } from '@material-ui/core/styles';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v4.0.0/optimal-imports.js <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v4.0.0/top-level-imports.js <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v1.0.0/import-path.js <path>\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v1.0.0/color-imports.js <path>\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v1.0.0/svg-icon-imports.js <path>\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nnpx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v0.15.0/import-path.js <path>\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","engines":{"node":">=12.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/4.0.0/node@v12.22.1+x64 (darwin)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jscodeshift":"^0.12.0","@types/jscodeshift":"0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-alpha.35_1622493257816_0.8804753914266141","host":"s3://npm-registry-packages"}},"5.0.0-beta.0":{"name":"@material-ui/codemod","version":"5.0.0-beta.0","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-beta.0","maintainers":[{"name":"michaldudak","email":"michal@dudak.me"},{"name":"siriwatknp","email":"siriwatkunaporn@gmail.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"bin":{"codemod":"codemod.js"},"dist":{"shasum":"0db0104dfdcfa5525e256f52725d110c1f6d0b9f","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-beta.0.tgz","fileCount":90,"integrity":"sha512-07dkyLKfR5dBzgpwSv0bwaXy5u6y1t9SLMo2NffAGtSbQJBUWwsvR3CDyBxzIS4tc30lbCJMYf9Fh2U5neb0cQ==","signatures":[{"sig":"MEUCIF5lZLK46KJPjl+ZvpjNYkBFOgI4H/YKO3VKGNEAxPtQAiEA1vZ4vqRaoGRq1tu4tlddF4zKKFdwaHpbY2oK6aXoLYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3bE1CRA9TVsSAnZWagAAlf4QAKHI3uOjwOULrXF6PnVf\nrnf3Kjchkug+6e7zttXiTf7Yszv76hx/+1de4ILRZ2YhRGUa2kftdEKIsec6\nmYBE0hslln5vL/8JLvxDvOEW587xbH6rlc8AL5owMV4NR3z0G6VOJ8fWxTsF\nuU0AX3+6PtRyCn3hFG9YRJUR3eMebmz1szS7bzw6aaJXRWWVX/Eq5L4acQKV\nZT4MQkvGnbthnYhCiRJXBCrpIazF5QAj6kX2nrKfCuzmACDh5Nu82w3cla8z\n8dRfw+yfMG1xNCGrmDOKPvLnZRi3jNhneD7rAyRqG2kzp9JpXzf9hriah6s1\nk9N1gx5zSyb3Edsf9ylm1rVueJsnvTTMVYcbBkWMcaPlZq3Pi9382rnVZdtA\nP6z7YKPrXkEK4g2NUBQMVPSDUy0Ix+0ncRadJ+bdxiIbPURYPDaglbCAtC/5\ndaa07v/rTNNPHOnTlMnYRa6miuvP9jH4HSTRMpj3uv2NaGReNfwk0TvAyo3s\nFad2JvGehI2loMWr2NdjKdgo0qZXgrDAZaOo3Nx8QxyskakZZWI5x9O85p7y\nePtzRzp8L7hAR+n5k1v2Rx+AlBV6VV2Yvdq4TW798Ik2++aWEhJOfaunFS5H\nVpOGF1Aw0bFdiU0kVtqzoYmK+K98n0KO/zE5WSNXHxgxd5HDajqG9KxkdhoN\nDQI7\r\n=oCX3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[jscodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI APIs.\n\n## Setup & run\n\n<!-- #default-branch-switch -->\n\n```bash\nnpx @material-ui/codemod@next <codemod> <paths...>\n\nApplies a `@material-ui/codemod` to the specified paths\n\nPositionals:\n  codemod  The name of the codemod                                [string]\n  paths    Paths forwarded to `jscodeshift`                       [string]\n\nOptions:\n  --version  Show version number                                 [boolean]\n  --help     Show help                                           [boolean]\n  --dry      dry run (no changes are made to files)\n                                                [boolean] [default: false]\n  --print    print transformed files to stdout, useful for development\n                                                [boolean] [default: false]\n\nExamples:\n  npx @material-ui/codemod@next v4.0.0/theme-spacing-api src\n  npx @material-ui/codemod@next v5.0.0/component-rename-prop src --\n  --component=Grid --from=prop --to=newProp\n```\n\n## Included scripts\n\n### v5.0.0\n\n#### `component-rename-prop`\n\nA generic codemod to rename any component prop.\n\n```diff\n-<Component prop=\"value\" />\n-<Component prop />\n+<Component newProp=\"value\" />\n+<Component newProp />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp\n```\n\n#### `autocomplete-rename-closeicon`\n\nRenames `fade` style utility import and calls from `fade` to `alpha`.\n\n```diff\n-<Autocomplete closeIcon={defaultClearIcon} />\n+<Autocomplete clearIcon={defaultClearIcon} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/autocomplete-rename-closeicon  <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#autocomplete).\n\n#### `avatar-circle-circular`\n\nUpdates the Avatar `variant` value and classes key from 'circle' to 'circular'.\n\n```diff\n-<Avatar variant=\"circle\" />\n-<Avatar classes={{ circle: 'className' }} />\n+<Avatar variant=\"circular\" />\n+<Avatar classes={{ circular: 'className' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/avatar-circle-circular <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#avatar).\n\n#### `button-color-prop`\n\nRemoves the outdated `color` prop values.\n\n```diff\n-<Button color=\"primary\">\n-<Button color=\"default\">\n+<Button>\n+<Button>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-borderradius-values <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#button).\n\n#### `box-borderradius-values`\n\nUpdates the Box API from separate system props to `sx`.\n\n```diff\n-<Box borderRadius=\"borderRadius\">\n-<Box borderRadius={16}>\n+<Box borderRadius={1}>\n+<Box borderRadius=\"16px\">\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-sx-prop <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `box-rename-gap`\n\nRenames the Box `grid*Gap` props.\n\n```diff\n-<Box gridGap={2}>Item 3</Box>\n-<Box gridColumnGap={3}>Item 4</Box>\n-<Box gridRowGap={4}>Item 5</Box>\n+<Box gap={2}>Item 3</Box>\n+<Box columnGap={3}>Item 4</Box>\n+<Box rowGap={4}>Item 5</Box>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-rename-gap <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `badge-overlap-value`\n\nRenames the badge's props.\n\n```diff\n-<Badge overlap=\"circle\">\n-<Badge overlap=\"rectangle\">\n+<Badge overlap=\"circular\">\n+<Badge overlap=\"rectangular\">\n<Badge classes={{\n- anchorOriginTopRightRectangle: 'className',\n- anchorOriginBottomRightRectangle: 'className',\n- anchorOriginTopLeftRectangle: 'className',\n- anchorOriginBottomLeftRectangle: 'className',\n- anchorOriginTopRightCircle: 'className',\n- anchorOriginBottomRightCircle: 'className',\n- anchorOriginTopLeftCircle: 'className',\n+ anchorOriginTopRightRectangular: 'className',\n+ anchorOriginBottomRightRectangular: 'className',\n+ anchorOriginTopLeftRectangular: 'className',\n+ anchorOriginBottomLeftRectangular: 'className',\n+ anchorOriginTopRightCircular: 'className',\n+ anchorOriginBottomRightCircular: 'className',\n+ anchorOriginTopLeftCircular: 'className',\n}}>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-rename-gap <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#badge).\n\n#### `chip-variant-prop`\n\nRemoves the Chip `variant` prop if the value is `\"default\"`.\n\n```diff\n-<Chip variant=\"default\">\n+<Chip>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/chip-variant-prop <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#chip).\n\n#### `circularprogress-variant`\n\nRename the CircularPress `static` variant to `determinate`.\n\n```diff\n-<CircularProgress variant=\"static\" classes={{ static: 'className' }} />\n+<CircularProgress variant=\"determinate\" classes={{ determinate: 'className' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/circularprogress-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#circularprogress).\n\n#### `collapse-rename-collapsedheight`\n\nRename the CircularPress `static` variant to `determinate`.\n\n```diff\n-<Collapse collapsedHeight={40} />\n-<Collapse classes={{ container: 'collapse' }} />\n+<Collapse collapsedSize={40} />\n+<Collapse classes={{ root: 'collapse' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/collapse-rename-collapsedheight <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#collapse).\n\n#### `fade-rename-alpha`\n\nRenames `fade` style utility import and calls frpm `fade` to `alpha`.\n\n```diff\n-import { fade, lighten } from '@material-ui/core/styles';\n+import { alpha, lighten } from '@material-ui/core/styles';\n\n-const foo = fade('#aaa');\n+const foo = alpha('#aaa');\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/fade-rename-alpha <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#styles).\n\n#### `grid-justify-justifycontent`\n\nRenames `fade` style utility import and calls frpm `fade` to `alpha`.\n\n```diff\n-<Grid justify=\"left\">Item</Grid>\n+<Grid item justifyContent=\"left\">Item</Grid>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/grid-justify-justifycontent <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#grid).\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/moved-lab-modules <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#skeleton).\n\n#### `variant-prop`\n\nAdd the TextField, Select, and FormControl `variant=\"standard\"` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n-<TextField value=\"Outlined\" variant=\"outlined\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n+<TextField value=\"Outlined\" />\n```\n\n```diff\n-<Select value=\"Standard\" />\n-<Select value=\"Outlined\" variant=\"outlined\" />\n+<Select value=\"Standard\" variant=\"standard\" />\n+<Select value=\"Outlined\" />\n```\n\n```diff\n-<FormControl value=\"Standard\" />\n-<FormControl value=\"Outlined\" variant=\"outlined\" />\n+<FormControl value=\"Standard\" variant=\"standard\" />\n+<FormControl value=\"Outlined\" />\n```\n\nThis codemod is **non-idempotent** (`variant=\"standard\"` would be added on a subsequent run, where `variant=\"outlined\"` was removed), so it should only be run once against any particular codebase.\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/variant-prop <path>\n```\n\n#### `use-transitionprops`\n\nUpdates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to replace the `onEnter*` and `onExit*` props.\n\n```diff\n<Dialog\n-  onEnter={onEnter}\n-  onEntered={onEntered}\n-  onEntering={onEntering}\n-  onExit={onExit}\n-  onExited={onExited}\n-  onExiting={onExiting}\n+  TransitionProps={{\n+    onEnter,\n+    onEntered,\n+    onEntering,\n+    onExit,\n+    onExited,\n+    onExiting,\n+  }}\n/>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/use-transitionprops <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](/guides/migration-v4/#dialog).\n\n#### `theme-breakpoints`\n\nUpdates breakpoint values to match new logic.\n\n```diff\n-theme.breakpoints.down('sm')\n-theme.breakpoints.between('sm', 'md')\n+theme.breakpoints.down('md')\n+theme.breakpoints.between('sm', 'lg')\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-breakpoints.js <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-spacing`\n\nRemoves the 'px' suffix from some template strings.\n\n```diff\n-`${theme.spacing(2)}px`\n-`${theme.spacing(2)}px ${theme.spacing(4)}px`\n+`${theme.spacing(2)}`\n+`${theme.spacing(2)} ${theme.spacing(4)}`\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-spacing <path>\n```\n\nNote that if there are calculations using `theme.spacing()`, these will need to be resolved manually. Consider using CSS calc:\n\n```diff\n-width: `${theme.spacing(2) - 1}px`,\n+widith: `calc(${theme.spacing(2)} - 1px)`,\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/theme-spacing-api <path>\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { withStyles, createTheme } from '@material-ui/core/styles';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/optimal-imports <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/top-level-imports <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/import-path <path>\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/color-imports <path>\n```\n\n**additional options**\n\n<!-- #default-branch-switch -->\n\n```\nnpx @material-ui/codemod@next v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/svg-icon-imports <path>\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v0.15.0/import-path <path>\n```\n","engines":{"node":">=12.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"michaldudak","email":"michal@dudak.me"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (darwin)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.0","dependencies":{"yargs":"^17.0.1","@babel/core":"^7.4.5","jscodeshift":"^0.13.0","@babel/runtime":"^7.4.4","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jscodeshift":"0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-beta.0_1625141556800_0.9624823513085337","host":"s3://npm-registry-packages"}},"5.0.0-beta.1":{"name":"@material-ui/codemod","version":"5.0.0-beta.1","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-beta.1","maintainers":[{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"siriwatknp","email":"siriwatkunaporn@gmail.com"},{"name":"michaldudak","email":"michal@dudak.me"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"bin":{"codemod":"codemod.js"},"dist":{"shasum":"5cfd384c422f735b5e01fbdf8efff436a2ad5466","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-beta.1.tgz","fileCount":216,"integrity":"sha512-ovWHIk7rne7+uG1Gy+81RREyZnhlDEP9hvuDUIuUziUVlO11nLCk8RDDe8aHXQRb/GNf0H5xcfWirSUSFtK/GA==","signatures":[{"sig":"MEUCIQCZkEEXBKw+f+7P6jK5XmtPuT9WaS/PX2HEwjVI9eBjLQIgG/I9y0iuf4Mwn17ptzoTQhAZ/ULtLQMh4D3MzlVVpV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":259944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9+ZbCRA9TVsSAnZWagAAIBsP/2LK6VmsJQD3EOYpdcbd\ntE+cEafq0C6b/dvCdFEfw7ftAnrTgQML/G+OlFOFtwJwhMRRJhmfuf3xF0MO\n5Kn8Dr9k803gWQEX7Y9ZveMUtCLOYXAsaM1KL19Qd5gDHQlPNY/+QfiNoqd7\nPOv7Nef7e+MPpBRSUrbBek3EyIq5g1plsy2xPit42R7r9+QTDEBNM5PTvd+o\nUDStI857wp9Htxf/gx97PvkUN/fP1M0m07rFIPlBsP66fvFu7h6NMh4XlOUn\nFULcSYGR0byBs4wJhTc9WykjljMxejWUNW1jzAmllHjkB+f5Zk34bAOptLE7\nBIpxarto4bNiiv89i1M0u2eyl5wsjtXtOdLoJkqWkLzfe7/rb7KhrK7dwI5d\ncTFcrhrM5VixzcI32CSa36KFBseYk3J4caVESn3jPWeKuPMSdrr8h1GfTzAp\nTJFVYLA8cza3OGhidf6iQHDjug8oXYiUG+XdzjuyhqYd3vXGMKWCT/4Q7zNj\nmNaOoKrMr3hp+v8Wkc2ke081ScN1gwLfkgjVxqkRTtuxhO0Zx1jKg/knlEz3\nA0KK4AU54OcjcDs0NIoEsdIOZKlhJf1muGvVYR1OWBvvOSZhNNKuCq6jKXM5\nkMcs2ydTmDnEQdhLgPwdtZpkFURYT95Bmrk97Urs0i6Tpn3lHUjQTsE8lmSE\nRiN8\r\n=1GP7\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=12.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"6.14.12","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"yargs":"^17.0.1","@babel/core":"^7.4.5","jscodeshift":"^0.13.0","@babel/runtime":"^7.4.4","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/jscodeshift":"0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-beta.1_1626859099416_0.978484397499698","host":"s3://npm-registry-packages"}},"5.0.0-beta.2":{"name":"@material-ui/codemod","version":"5.0.0-beta.2","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-beta.2","maintainers":[{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"siriwatknp","email":"siriwatkunaporn@gmail.com"},{"name":"michaldudak","email":"michal@dudak.me"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"bin":{"codemod":"codemod.js"},"dist":{"shasum":"82152c1d8bef7ce0eed1913702b5b4f3eb635c27","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-beta.2.tgz","fileCount":235,"integrity":"sha512-+d7FaOazdEJNQV4kfsyyIBLrV+T2g9IzwHNOfNNT0HF70XPcqH0KeupUELYw50ue30GWiuC9IsuqgRXRkuoIDw==","signatures":[{"sig":"MEQCIDO5iGxGFx19lS/jnTCzSZqFxfZwTKjHaHSL8lKSFrCCAiBeyezDPQ2VdwKKZsj/Sa8qqCWzMuuA2rhTrn3sfrw2HA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/s4/CRA9TVsSAnZWagAAKGcQAIgort58szxqDQZV4EMj\nf5fXG5XpyA8NeLv0o3x2Egc0bS6PGDxpMvyFvsFuHqt33jLzXX13m8QBCOQU\nG+bXkeaOedCoZj5jn9U9yrsjZMtLhceozL/NJ2A/ZIIiBD27++w5VRp98YlR\n5CtvjZ0NLJeyuR242bX1JV0uZPSI9FcSdJXsD/A4cOIivgdiY5wybVWQONY+\nDWeyhOL938GlyB/xYiNOme9AXEjz98m5p622u8RaZJH4C11g4P50cbyQc8UU\n63bWLJeH/IjZsbFRbElGspH80Mg8KM+OL4wQ5AHyNKVnYWjy/8qsLipWoyHT\n90bo7Jwy2p36dcas7c6XClUObMbmBlbVlG4oshewZjeQcORuI+JqNoH4JF/z\n/EYUPEtLxzREtXaRVK7jnueZN9GVtAWNvSjCSxdwFVR9FmAQK/dZ4lih5iwr\nmJQWs+Ri7xjZvjrhgeAhFoJ45l9234AgQS+skiEjik5/BgbInS5ZtyGxPg+m\n2o08anDNwbwUTySG2SwHPaZbZkngHQVn4OnL2/zZZeXNBxKJvTlXGObYwGhe\nUwE0Yf5nxxd4r+/lyQjl3dIskRLuoFhRGG3CbTb0UkvEwyaYnJTHr0t6GxMz\nn7BdrlDlt25G2g9f35vVTXNzbQAjlKoGgj+53wmMixjs5X21bKV7K7snoXyg\nA3o2\r\n=xsQ2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[jscodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI APIs.\n\n## Setup & run\n\n<!-- #default-branch-switch -->\n\n```bash\nnpx @material-ui/codemod@next <codemod> <paths...>\n\nApplies a `@material-ui/codemod` to the specified paths\n\nPositionals:\n  codemod  The name of the codemod                                [string]\n  paths    Paths forwarded to `jscodeshift`                       [string]\n\nOptions:\n  --version  Show version number                                 [boolean]\n  --help     Show help                                           [boolean]\n  --dry      dry run (no changes are made to files)\n                                                [boolean] [default: false]\n  --print    print transformed files to stdout, useful for development\n                                                [boolean] [default: false]\n  --jscodeshift                                  [string] [default: false]\n\nExamples:\n  npx @material-ui/codemod@next v4.0.0/theme-spacing-api src\n  npx @material-ui/codemod@next v5.0.0/component-rename-prop src --\n  --component=Grid --from=prop --to=newProp\n```\n\n#### jscodeshift options\n\nTo pass more options directly to jscodeshift, use `--jscodeshift=\"...\"`. For example:\n\n```sh\nnpx @material-ui/codemod@next --jscodeshift=\"--run-in-band --verbose=2\"\n```\n\nSee all available options [here](https://github.com/facebook/jscodeshift#usage-cli).\n\n#### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough jscodeshift's `printOptions` command line argument\n\n```sh\nnpx @material-ui/codemod@next <transform> <path> --jscodeshift=\"--printOptions='{\\\"quote\\\":\\\"double\\\"}'\"\n```\n\n## Included scripts\n\n### v5.0.0\n\n#### 🚀 `preset-safe`\n\nA combination of all important transformers for migrating v4 to v5. ⚠️ This codemod should be run only once.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/preset-safe <path|folder>\n```\n\nThe list includes these transformers\n\n- [`adapter-v4`](#adapter-v4)\n- [`autocomplete-rename-closeicon`](#autocomplete-rename-closeicon)\n- [`autocomplete-rename-option`](#autocomplete-rename-option)\n- [`avatar-circle-circular`](#avatar-circle-circular)\n- [`badge-overlap-value`](#badge-overlap-value)\n- [`box-borderradius-values`](#box-borderradius-values)\n- [`box-rename-css`](#box-rename-css)\n- [`box-rename-gap`](#box-rename-gap)\n- [`button-color-prop`](#button-color-prop)\n- [`chip-variant-prop`](#chip-variant-prop)\n- [`circularprogress-variant`](#circularprogress-variant)\n- [`collapse-rename-collapsedheight`](#collapse-rename-collapsedheight)\n- [`core-styles-import`](#core-styles-import)\n- [`create-theme`](#create-theme)\n- [`dialog-props`](#dialog-props)\n- [`dialog-title-props`](#dialog-title-props)\n- [`emotion-prepend-cache`](#emotion-prepend-cache)\n- [`expansion-panel-component`](#expansion-panel-component)\n- [`fab-variant`](#fab-variant)\n- [`fade-rename-alpha`](#fade-rename-alpha)\n- [`grid-justify-justifycontent`](#grid-justify-justifycontent)\n- [`grid-list-component`](#grid-list-component)\n- [`icon-button-size`](#icon-button-size)\n- [`material-ui-styles`](#material-ui-styles)\n- [`material-ui-types`](#material-ui-types)\n- [`modal-props`](#modal-props)\n- [`moved-lab-modules`](#moved-lab-modules)\n- [`pagination-round-circular`](#pagination-round-circular)\n- [`optimal-imports`](#optimal-imports)\n- [`root-ref`](#root-ref)\n- [`skeleton-variant`](#skeleton-variant)\n- [`styled-engine-provider`](#styled-engine-provider)\n- [`table-props`](#table-props)\n- [`tabs-scroll-buttons`](#tabs-scroll-buttons)\n- [`textarea-minmax-rows`](#textarea-minmax-rows)\n- [`theme-augment`](#theme-augment)\n- [`theme-breakpoints`](#theme-breakpoints)\n- [`theme-breakpoints-width`](#theme-breakpoints-width)\n- [`theme-options`](#theme-options)\n- [`theme-palette-mode`](#theme-palette-mode)\n- [`theme-provider`](#theme-provider)\n- [`theme-spacing`](#theme-spacing)\n- [`theme-typography-round`](#theme-typography-round)\n- [`transitions`](#transitions)\n- [`use-autocomplete`](#use-autocomplete)\n- [`use-transitionprops`](#use-transitionprops)\n- [`with-mobile-dialog`](#with-mobile-dialog)\n- [`with-width`](#with-width)\n\n#### `adapter-v4`\n\nImports and inserts `adaptV4Theme` into `createTheme` (or `createMuiTheme`)\n\n```diff\n+import { adaptV4Theme } from '@material-ui/core/styles';\n\n-createTheme({ palette: { ... }})\n+createTheme(adaptV4Theme({ palette: { ... }}))\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/adapter-v4 <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `autocomplete-rename-closeicon`\n\nRenames `Autocomplete`'s `closeIcon` prop to `clearIcon`.\n\n```diff\n-<Autocomplete closeIcon={defaultClearIcon} />\n+<Autocomplete clearIcon={defaultClearIcon} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/autocomplete-rename-closeicon  <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#autocomplete).\n\n#### `autocomplete-rename-option`\n\nRenames `Autocomplete`'s `getOptionSelected` to `isOptionEqualToValue`.\n\n```diff\n<Autocomplete\n- getOptionSelected={(option, value) => option.title === value.title}\n+ isOptionEqualToValue={(option, value) => option.title === value.title}\n/>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/autocomplete-rename-option  <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#autocomplete).\n\n#### `avatar-circle-circular`\n\nUpdates the `Avatar`'s `variant` value and `classes` key from 'circle' to 'circular'.\n\n```diff\n-<Avatar variant=\"circle\" />\n-<Avatar classes={{ circle: 'className' }} />\n+<Avatar variant=\"circular\" />\n+<Avatar classes={{ circular: 'className' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/avatar-circle-circular <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#avatar).\n\n#### `badge-overlap-value`\n\nRenames the badge's props.\n\n```diff\n-<Badge overlap=\"circle\">\n-<Badge overlap=\"rectangle\">\n+<Badge overlap=\"circular\">\n+<Badge overlap=\"rectangular\">\n<Badge classes={{\n- anchorOriginTopRightRectangle: 'className',\n- anchorOriginBottomRightRectangle: 'className',\n- anchorOriginTopLeftRectangle: 'className',\n- anchorOriginBottomLeftRectangle: 'className',\n- anchorOriginTopRightCircle: 'className',\n- anchorOriginBottomRightCircle: 'className',\n- anchorOriginTopLeftCircle: 'className',\n+ anchorOriginTopRightRectangular: 'className',\n+ anchorOriginBottomRightRectangular: 'className',\n+ anchorOriginTopLeftRectangular: 'className',\n+ anchorOriginBottomLeftRectangular: 'className',\n+ anchorOriginTopRightCircular: 'className',\n+ anchorOriginBottomRightCircular: 'className',\n+ anchorOriginTopLeftCircular: 'className',\n}}>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/badge-overlap-value <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#badge).\n\n#### `box-borderradius-values`\n\nUpdates the Box API from separate system props to `sx`.\n\n```diff\n-<Box borderRadius=\"borderRadius\">\n-<Box borderRadius={16}>\n+<Box borderRadius={1}>\n+<Box borderRadius=\"16px\">\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-borderradius-values <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `box-rename-css`\n\nRenames the Box `css` prop to `sx`\n\n```diff\n-<Box css={{ m: 2 }}>\n+<Box sx={{ m: 2 }}>\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-rename-css <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `box-rename-gap`\n\nRenames the Box `grid*Gap` props.\n\n```diff\n-<Box gridGap={2}>Item 3</Box>\n-<Box gridColumnGap={3}>Item 4</Box>\n-<Box gridRowGap={4}>Item 5</Box>\n+<Box gap={2}>Item 3</Box>\n+<Box columnGap={3}>Item 4</Box>\n+<Box rowGap={4}>Item 5</Box>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-rename-gap <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `button-color-prop`\n\nRemoves the outdated `color` prop values.\n\n```diff\n-<Button color=\"default\">\n+<Button>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/button-color-prop <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#button).\n\n#### `chip-variant-prop`\n\nRemoves the Chip `variant` prop if the value is `\"default\"`.\n\n```diff\n-<Chip variant=\"default\">\n+<Chip>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/chip-variant-prop <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#chip).\n\n#### `circularprogress-variant`\n\nRenames the CircularProgress `static` variant to `determinate`.\n\n```diff\n-<CircularProgress variant=\"static\" classes={{ static: 'className' }} />\n+<CircularProgress variant=\"determinate\" classes={{ determinate: 'className' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/circularprogress-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#circularprogress).\n\n#### `collapse-rename-collapsedheight`\n\nRenames `Collapse`'s `collapsedHeight` prop to `collapsedSize`.\n\n```diff\n-<Collapse collapsedHeight={40} />\n-<Collapse classes={{ container: 'collapse' }} />\n+<Collapse collapsedSize={40} />\n+<Collapse classes={{ root: 'collapse' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/collapse-rename-collapsedheight <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#collapse).\n\n#### `component-rename-prop`\n\nA generic codemod to rename any component prop.\n\n```diff\n-<Component prop=\"value\" />\n-<Component prop />\n+<Component newProp=\"value\" />\n+<Component newProp />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp\n```\n\n#### `core-styles-import`\n\nRenames private import from `core/styles/*` to `core/styles`\n\n```diff\n-import { darken, lighten } from '@material-ui/core/styles/colorManipulator';\n+import { darken, lighten } from '@material-ui/core/styles';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/core-styles-import <path>\n```\n\n#### `create-theme`\n\nRenames the function `createMuiTheme` to `createTheme`\n\n```diff\n-import { createMuiTheme } from '@material-ui/core/styles';\n+import { createTheme } from '@material-ui/core/styles';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/create-theme <path>\n```\n\n#### `dialog-props`\n\nRemove `disableBackdropClick` prop from `<Dialog>`\n\n```diff\n-<Dialog disableBackdropClick />\n+<Dialog />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/dialog-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#dialog).\n\n#### `dialog-title-props`\n\nRemove `disableTypography` prop from `<DialogTitle>`\n\n```diff\n-<DialogTitle disableTypography />\n+<DialogTitle />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/dialog-title-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#dialog).\n\n#### `emotion-prepend-cache`\n\nAdds `prepend: true` to emotion `createCache`\n\n```diff\nconst cache = emotionCreateCache({\n  key: 'css',\n+ prepend: true,\n});\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/create-theme <path>\n```\n\n#### `expansion-panel-component`\n\nRenames `ExpansionPanel*` to `Accordion*`\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/expansion-panel-component <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#expansionpanel).\n\n#### `fab-variant`\n\n```diff\n-<Fab variant=\"round\" />\n+<Fab variant=\"circular\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/fab-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#fab).\n\n#### `fade-rename-alpha`\n\nRenames the `fade` style utility import and calls to `alpha`.\n\n```diff\n-import { fade, lighten } from '@material-ui/core/styles';\n+import { alpha, lighten } from '@material-ui/core/styles';\n\n-const foo = fade('#aaa');\n+const foo = alpha('#aaa');\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/fade-rename-alpha <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#styles).\n\n#### `grid-justify-justifycontent`\n\nRenames `Grid`'s `justify` prop to `justifyContent`.\n\n```diff\n-<Grid justify=\"left\">Item</Grid>\n+<Grid item justifyContent=\"left\">Item</Grid>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/grid-justify-justifycontent <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#grid).\n\n#### `grid-list-component`\n\nRenames `GridList*` to `ImageList*`\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/grid-list-component <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#gridlist).\n\n#### `icon-button-size`\n\nAdds `size=\"large\"` if `size` is not defined to get the same appearance as v4.\n\n```diff\n-<IconButton size=\"medium\" />\n-<IconButton />\n+<IconButton size=\"medium\" />\n+<IconButton size=\"large\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/icon-button-size <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#iconbutton).\n\n#### `jss-to-styled`\n\nReplace JSS styling with `makeStyles` or `withStyles` to `styled` API.\n\n```diff\nimport Typography from '@material-ui/core/Typography';\n-import makeStyles from '@material-ui/styles/makeStyles';\n+import { styled } from '@material-ui/core/styles';\n\n-const useStyles = makeStyles((theme) => ({\n-  root: {\n-    display: 'flex',\n-    alignItems: 'center',\n-    backgroundColor: theme.palette.primary.main\n-  },\n-  cta: {\n-    borderRadius: theme.shape.radius.\n-  },\n-  content: {\n-    color: theme.palette.common.white,\n-    fontSize: 16,\n-    lineHeight: 1.7\n-  },\n-}))\n+const PREFIX = 'MyCard';\n+const classes = {\n+  root: `${PREFIX}-root`,\n+  cta: `${PREFIX}-cta`,\n+  content: `${PREFIX}-content`,\n+}\n+const Root = styled('div')((theme) => ({\n+  [`&.${classes.root}`]: {\n+    display: 'flex',\n+    alignItems: 'center',\n+    backgroundColor: theme.palette.primary.main\n+  },\n+  [`& .${classes.cta}`]: {\n+    borderRadius: theme.shape.radius.\n+  },\n+  [`& .${classes.content}`]: {\n+    color: theme.palette.common.white,\n+    fontSize: 16,\n+    lineHeight: 1.7\n+  },\n+}))\n\nexport const MyCard = () => {\n  const classes = useStyles();\n  return (\n-   <div className={classes.root}>\n+   <Root className={classes.root}>\n      <Typography className={classes.content}>...</Typography>\n      <Button className={classes.cta}>Go</Button>\n+   </Root>\n-   </div>\n  )\n}\n```\n\n> **Note:** This approach convert the first element in the return statement into styled component but also increase CSS Specificity to override nested children. It is recommended to use this codemod in a big component that is intend to style nested components.\n> This codemod should be adopt after handling all breaking changes, [check out the migration documentation](https://next.material-ui.com/guides/migration-v4)\n\n#### `link-underline-hover`\n\nApply `underline=\"hover\"` to `<Link />` that does not define `underline` prop (to get the same behavior as in v4).\n\n```diff\n-<Link />\n+<Link underline=\"hover\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/icon-button-size <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#link).\n\n#### `material-ui-styles`\n\nMoves JSS imports to `@material-ui/styles`\n\n```diff\n-import {\n-  createGenerateClassName,\n-  createStyles,\n-  jssPreset,\n-  makeStyles,\n-  ServerStyleSheets,\n-  useThemeVariants,\n-  withStyles,\n-  withTheme,\n-  ThemeProvider,\n-  styled,\n-  getStylesCreator,\n-  mergeClasses,\n-} from '@material-ui/core/styles';\n+import { ThemeProvider, styled } from '@material-ui/core/styles';\n+import createGenerateClassName from '@material-ui/styles/createGenerateClassName';\n+import createStyles from '@material-ui/styles/createStyles';\n+import jssPreset from '@material-ui/styles/jssPreset';\n+import makeStyles from '@material-ui/styles/makeStyles';\n+import ServerStyleSheets from '@material-ui/styles/ServerStyleSheets';\n+import useThemeVariants from '@material-ui/styles/useThemeVariants';\n+import withStyles from '@material-ui/styles/withStyles';\n+import withTheme from '@material-ui/styles/withTheme';\n+import getStylesCreator from '@material-ui/styles/getStylesCreator';\nimport mergeClasses from '@material-ui/styles/mergeClasses';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/material-ui-styles <path>\n```\n\n#### `material-ui-types`\n\nRenames `Omit` import from `@material-ui/types` to `DistributiveOmit`\n\n```diff\n-import { Omit } from '@material-ui/types';\n+import { DistributiveOmit } from '@material-ui/types';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/material-ui-types <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-types).\n\n#### `modal-props`\n\nRemoves `disableBackdropClick` and `onEscapeKeyDown` from `<Modal>`\n\n```diff\n<Modal\n- disableBackdropClick\n- onEscapeKeyDown={handleEscapeKeyDown}\n/>\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/modal-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#modal).\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/moved-lab-modules <path>\n```\n\nYou can find more details about this breaking change in the migration guide.\n\n- [Alert](https://next.material-ui.com/guides/migration-v4/#alert)\n- [Autocomplete](https://next.material-ui.com/guides/migration-v4/#autocomplete)\n- [AvatarGroup](https://next.material-ui.com/guides/migration-v4/#avatar)\n- [Pagination](https://next.material-ui.com/guides/migration-v4/#pagination)\n- [Skeleton](https://next.material-ui.com/guides/migration-v4/#skeleton)\n- [SpeedDial](https://next.material-ui.com/guides/migration-v4/#speeddial)\n- [ToggleButton](https://next.material-ui.com/guides/migration-v4/#togglebutton)\n\n#### `pagination-round-circular`\n\nRenames `Pagination*`'s `shape` values from 'round' to 'circular'.\n\n```diff\n-<Pagination shape=\"round\" />\n-<PaginationItem shape=\"round\" />\n+<Pagination shape=\"circular\" />\n+<PaginationItem shape=\"circular\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/pagination-round-circular <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#pagination).\n\n#### `optimal-imports`\n\nFix private import paths.\n\n```diff\n-import red from '@material-ui/core/colors/red';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { red } from '@material-ui/core/colors';\n+import { createTheme } from '@material-ui/core/styles';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/optimal-imports <path>\n```\n\n#### `root-ref`\n\nRemoves `RootRef` from the codebase.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/root-ref <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#rootref).\n\n#### `skeleton-variant`\n\n```diff\n-<Skeleton vairiant=\"circle\" />\n-<Skeleton vairiant=\"rect\" />\n+<Skeleton vairiant=\"circular\" />\n+<Skeleton vairiant=\"rectangular\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/skeleton-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#skeleton).\n\n#### `styled-engine-provider`\n\nApplies `StyledEngineProvider` to the files that contains `ThemeProvider`.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/styled-engine-provider <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#style-library).\n\n#### `table-props`\n\nRenames props in `Table*` components.\n\n```diff\n-<>\n-  <TablePagination onChangeRowsPerPage={() => {}} onChangePage={() => {}} />\n-  <TablePagination classes={{ input: 'foo' }} />\n-  <Table padding=\"default\" />\n-  <TableCell padding=\"default\" />\n-</>\n+<>\n+  <TablePagination onRowsPerPageChange={() => {}} onPageChange={() => {}} />\n+  <TablePagination classes={{ select: 'foo' }} />\n+  <Table padding=\"normal\" />\n+  <TableCell padding=\"normal\" />\n+</>\n\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/table-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#table).\n\n#### `tabs-scroll-buttons`\n\nRenames the `Tabs`'s `scrollButtons` prop values.\n\n```diff\n-<Tabs scrollButtons=\"on\" />\n-<Tabs scrollButtons=\"desktop\" />\n-<Tabs scrollButtons=\"off\" />\n+<Tabs scrollButtons allowScrollButtonsMobile />\n+<Tabs scrollButtons />\n+<Tabs scrollButtons={false} />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/tabs-scroll-buttons <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#tabs).\n\n#### `textarea-minmax-rows`\n\nRenames `TextField`'s rows props.\n\n```diff\n-<TextField rowsMin={3} rowsMax={6} />\n-<TextareaAutosize rows={2} />\n-<TextareaAutosize rowsMin={3} rowsMax={6} />\n+<TextField minRows={3} maxRows={6} />\n+<TextareaAutosize minRows={2} />\n+<TextareaAutosize minRows={3} maxRows={6} />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/textarea-minmax-rows <path>\n```\n\nYou can find more details about this breaking change in the migration guide.\n\n- [TextareaAutosize](https://next.material-ui.com/guides/migration-v4/#textareaautoresize)\n- [TextField](https://next.material-ui.com/guides/migration-v4/#textfield)\n\n#### `theme-augment`\n\nAdds `DefaultTheme` module augmentation to typescript projects.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-augment <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-styles).\n\n#### `theme-breakpoints`\n\nUpdates breakpoint values to match new logic. ⚠️ This mod is not idempotent, it should be run only once.\n\n```diff\n-theme.breakpoints.down('sm')\n-theme.breakpoints.between('sm', 'md')\n+theme.breakpoints.down('md')\n+theme.breakpoints.between('sm', 'lg')\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-breakpoints <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-breakpoints-width`\n\nRenames `theme.breakpoints.width('md')` to `theme.breakpoints.values.md`.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-breakpoints-width <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-options`\n\n```diff\n-import { ThemeOptions } from '@material-ui/core';\n+import { DeprecatedThemeOptions } from '@material-ui/core';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-options <path>\n```\n\n#### `theme-palette-mode`\n\nRenames `type` to `mode`.\n\n```diff\n- { palette: { type: 'dark' } }\n+ { palette: { mode: 'dark' } }\n-theme.palette.type === 'dark'\n+theme.palette.mode === 'dark'\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-palette-mode <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-provider`\n\nRenames `MuiThemeProvider` to `ThemeProvider`.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-provider <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-core-styles).\n\n#### `theme-spacing`\n\nRemoves the 'px' suffix from some template strings.\n\n```diff\n-`${theme.spacing(2)}px`\n-`${theme.spacing(2)}px ${theme.spacing(4)}px`\n+`${theme.spacing(2)}`\n+`${theme.spacing(2)} ${theme.spacing(4)}`\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-spacing <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-typography-round`\n\nRenames `theme.typography.round($number)` to `Math.round($number * 1e5) / 1e5`.\n\n```diff\n-`${theme.typography.round($number)}`\n+`${Math.round($number * 1e5) / 1e5}`\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-typography-round <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `transitions`\n\nRenames import `transitions` to `createTransitions`\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/transitions <path>\n```\n\n#### `use-autocomplete`\n\nRenames `useAutocomplete` related import from lab to core\n\n```diff\n-import useAutocomplete from '@material-ui/lab/useAutocomplete';\n+import useAutocomplete from '@material-ui/core/useAutocomplete';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/use-autocomplete <path>\n```\n\n#### `use-transitionprops`\n\nUpdates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to replace the `onEnter*` and `onExit*` props.\n\n```diff\n<Dialog\n-  onEnter={onEnter}\n-  onEntered={onEntered}\n-  onEntering={onEntering}\n-  onExit={onExit}\n-  onExited={onExited}\n-  onExiting={onExiting}\n+  TransitionProps={{\n+    onEnter,\n+    onEntered,\n+    onEntering,\n+    onExit,\n+    onExited,\n+    onExiting,\n+  }}\n/>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/use-transitionprops <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](/guides/migration-v4/#dialog).\n\n#### `variant-prop`\n\n> Don't run this codemod if you already set `variant` to `outlined` or `filled` in theme default props.\n\nAdds the TextField, Select, and FormControl's `variant=\"standard\"` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n```\n\n```diff\n-<Select value=\"Standard\" />\n+<Select value=\"Standard\" variant=\"standard\" />\n```\n\n```diff\n-<FormControl value=\"Standard\" />\n+<FormControl value=\"Standard\" variant=\"standard\" />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/variant-prop <path>\n```\n\n#### `with-mobile-dialog`\n\nRemoves imported `withMobileDialog`, and inserts hardcoded version to prevent application crash.\n\n```diff\n- import withMobileDialog from '@material-ui/core/withMobileDialog';\n+ // FIXME checkout https://next.material-ui.com/guides/migration-v4/#dialog\n+ const withMobileDialog = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width=\"lg\" fullScreen={false} />;\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/with-mobile-dialog <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#dialog).\n\n#### `with-width`\n\nRemoves `withWidth` import, and inserts hardcoded version to prevent application crash.\n\n```diff\n- import withWidth from '@material-ui/core/withWidth';\n+ // FIXME checkout https://material-ui.com/components/use-media-query/#migrating-from-withwidth\n+ const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width=\"xs\" />;\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/with-width <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-core-styles).\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/theme-spacing-api <path>\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { withStyles, createTheme } from '@material-ui/core/styles';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/optimal-imports <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/top-level-imports <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/import-path <path>\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/color-imports <path>\n```\n\n**additional options**\n\n<!-- #default-branch-switch -->\n\n```\nnpx @material-ui/codemod@next v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/svg-icon-imports <path>\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v0.15.0/import-path <path>\n```\n","engines":{"node":">=12.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"mnajdova","email":"mnajdova@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/4.0.0/node@v12.19.0+x64 (win32)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"yargs":"^17.0.1","@babel/core":"^7.4.5","jscodeshift":"^0.13.0","@babel/runtime":"^7.4.4","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jscodeshift":"0.11.2"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-beta.2_1627311679086_0.9326822052256922","host":"s3://npm-registry-packages"}},"5.0.0-beta.3":{"name":"@material-ui/codemod","version":"5.0.0-beta.3","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-beta.3","maintainers":[{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"siriwatknp","email":"siriwatkunaporn@gmail.com"},{"name":"michaldudak","email":"michal@dudak.me"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"bin":{"codemod":"codemod.js"},"dist":{"shasum":"41753d93de37efca7b12a4f24190869a985d44b0","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-beta.3.tgz","fileCount":254,"integrity":"sha512-VHT4mjIn+LSDfYE1TFP+QSzRTkmOG5/J8+PadosPNVCd/JKbABE/2MDBYASPR8iDBSuJXDkMH6EquF599/3Zxg==","signatures":[{"sig":"MEUCIQCw3WaMa3geUf2+FOCP1xChVTTBsB5di7pdt/WSVjGMLwIgLGlYbaZdbn/UrBwacSNdvlc0CqqlyjAmX6C1smKkm7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":379098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEKj0CRA9TVsSAnZWagAAD4MQAIPlZOPTi9n/6bYHYvEG\nStEM2Wt3ZFLYHZCvp/oAUuFbQIJmclZZ8DLbSX+f2xLd1EC7e+FhLz5kYMlz\nlTuifdJZcZsD/LlArj+mjDrlDbIW9RBYjXuYWfUk3trwGlZJO7Ju1tns4Uf0\nDwLukPAPZwjwKXTwNSV3YTA4v4x3Kb9UW9qq+QWitMCoCguCptlxlsDbTc7y\nDMpvJqLP2pY4EIuXWO4f3qrszE5ZiiPhF6EXuSs+1LwLz3ZE7cAFegD3nLCI\nUIaAF7XsPx3j6uKCosGUThTMP1NTh+vxofFBI9rQplGqqWuJOXJTXoBL943+\n0szM0yL21PtGRgFGUDvDEJUtQUfBpFjwEZMNdnOACjTrkAS6NzhmvmyxxMcq\nZbu/zEZyAr4LwtqItxB3vwb02saLAitMxa+tZjJvG9SHFXXqqwL36zqZrn1C\nZ4Jm1QR2H1g4bzG+xTcLYu6Txad8p/xQpP5irrzRZailaqII1x6Akp+fHGaU\njNgmgPDd0uN7rZvppDR8uv/04CmoPiFdEW0jfHWS6VmUzqauO/doh7tLvFJL\nJpZdrw74XmPUMmBYqVdLL+j7CCBVgKv6R2AnfHvXXRIpwcwRw2VNhASlY9uS\nfdQG4UeCr2Yh2XYSeNav+YD86xzkVscvP1kvMj72BXbvQH1y3wwx1zfVkaH8\n7bmK\r\n=D5Ej\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[jscodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI APIs.\n\n## Setup & run\n\n<!-- #default-branch-switch -->\n\n```bash\nnpx @material-ui/codemod@next <codemod> <paths...>\n\nApplies a `@material-ui/codemod` to the specified paths\n\nPositionals:\n  codemod  The name of the codemod                                [string]\n  paths    Paths forwarded to `jscodeshift`                       [string]\n\nOptions:\n  --version  Show version number                                 [boolean]\n  --help     Show help                                           [boolean]\n  --dry      dry run (no changes are made to files)\n                                                [boolean] [default: false]\n  --print    print transformed files to stdout, useful for development\n                                                [boolean] [default: false]\n  --jscodeshift                                  [string] [default: false]\n\nExamples:\n  npx @material-ui/codemod@next v4.0.0/theme-spacing-api src\n  npx @material-ui/codemod@next v5.0.0/component-rename-prop src --\n  --component=Grid --from=prop --to=newProp\n```\n\n#### jscodeshift options\n\nTo pass more options directly to jscodeshift, use `--jscodeshift=\"...\"`. For example:\n\n```sh\nnpx @material-ui/codemod@next --jscodeshift=\"--run-in-band --verbose=2\"\n```\n\nSee all available options [here](https://github.com/facebook/jscodeshift#usage-cli).\n\n#### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough jscodeshift's `printOptions` command line argument\n\n```sh\nnpx @material-ui/codemod@next <transform> <path> --jscodeshift=\"--printOptions='{\\\"quote\\\":\\\"double\\\"}'\"\n```\n\n## Included scripts\n\n### v5.0.0\n\n#### 🚀 `preset-safe`\n\nA combination of all important transformers for migrating v4 to v5. ⚠️ This codemod should be run only once.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/preset-safe <path|folder>\n```\n\nThe list includes these transformers\n\n- [`adapter-v4`](#adapter-v4)\n- [`autocomplete-rename-closeicon`](#autocomplete-rename-closeicon)\n- [`autocomplete-rename-option`](#autocomplete-rename-option)\n- [`avatar-circle-circular`](#avatar-circle-circular)\n- [`badge-overlap-value`](#badge-overlap-value)\n- [`box-borderradius-values`](#box-borderradius-values)\n- [`box-rename-css`](#box-rename-css)\n- [`box-rename-gap`](#box-rename-gap)\n- [`button-color-prop`](#button-color-prop)\n- [`chip-variant-prop`](#chip-variant-prop)\n- [`circularprogress-variant`](#circularprogress-variant)\n- [`collapse-rename-collapsedheight`](#collapse-rename-collapsedheight)\n- [`core-styles-import`](#core-styles-import)\n- [`create-theme`](#create-theme)\n- [`dialog-props`](#dialog-props)\n- [`dialog-title-props`](#dialog-title-props)\n- [`emotion-prepend-cache`](#emotion-prepend-cache)\n- [`expansion-panel-component`](#expansion-panel-component)\n- [`fab-variant`](#fab-variant)\n- [`fade-rename-alpha`](#fade-rename-alpha)\n- [`grid-justify-justifycontent`](#grid-justify-justifycontent)\n- [`grid-list-component`](#grid-list-component)\n- [`icon-button-size`](#icon-button-size)\n- [`material-ui-styles`](#material-ui-styles)\n- [`material-ui-types`](#material-ui-types)\n- [`modal-props`](#modal-props)\n- [`moved-lab-modules`](#moved-lab-modules)\n- [`pagination-round-circular`](#pagination-round-circular)\n- [`optimal-imports`](#optimal-imports)\n- [`root-ref`](#root-ref)\n- [`skeleton-variant`](#skeleton-variant)\n- [`styled-engine-provider`](#styled-engine-provider)\n- [`table-props`](#table-props)\n- [`tabs-scroll-buttons`](#tabs-scroll-buttons)\n- [`textarea-minmax-rows`](#textarea-minmax-rows)\n- [`theme-augment`](#theme-augment)\n- [`theme-breakpoints`](#theme-breakpoints)\n- [`theme-breakpoints-width`](#theme-breakpoints-width)\n- [`theme-options`](#theme-options)\n- [`theme-palette-mode`](#theme-palette-mode)\n- [`theme-provider`](#theme-provider)\n- [`theme-spacing`](#theme-spacing)\n- [`theme-typography-round`](#theme-typography-round)\n- [`transitions`](#transitions)\n- [`use-autocomplete`](#use-autocomplete)\n- [`use-transitionprops`](#use-transitionprops)\n- [`with-mobile-dialog`](#with-mobile-dialog)\n- [`with-width`](#with-width)\n\n#### `adapter-v4`\n\nImports and inserts `adaptV4Theme` into `createTheme` (or `createMuiTheme`)\n\n```diff\n+import { adaptV4Theme } from '@material-ui/core/styles';\n\n-createTheme({ palette: { ... }})\n+createTheme(adaptV4Theme({ palette: { ... }}))\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/adapter-v4 <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `autocomplete-rename-closeicon`\n\nRenames `Autocomplete`'s `closeIcon` prop to `clearIcon`.\n\n```diff\n-<Autocomplete closeIcon={defaultClearIcon} />\n+<Autocomplete clearIcon={defaultClearIcon} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/autocomplete-rename-closeicon  <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#autocomplete).\n\n#### `autocomplete-rename-option`\n\nRenames `Autocomplete`'s `getOptionSelected` to `isOptionEqualToValue`.\n\n```diff\n<Autocomplete\n- getOptionSelected={(option, value) => option.title === value.title}\n+ isOptionEqualToValue={(option, value) => option.title === value.title}\n/>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/autocomplete-rename-option  <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#autocomplete).\n\n#### `avatar-circle-circular`\n\nUpdates the `Avatar`'s `variant` value and `classes` key from 'circle' to 'circular'.\n\n```diff\n-<Avatar variant=\"circle\" />\n-<Avatar classes={{ circle: 'className' }} />\n+<Avatar variant=\"circular\" />\n+<Avatar classes={{ circular: 'className' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/avatar-circle-circular <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#avatar).\n\n#### `badge-overlap-value`\n\nRenames the badge's props.\n\n```diff\n-<Badge overlap=\"circle\">\n-<Badge overlap=\"rectangle\">\n+<Badge overlap=\"circular\">\n+<Badge overlap=\"rectangular\">\n<Badge classes={{\n- anchorOriginTopRightRectangle: 'className',\n- anchorOriginBottomRightRectangle: 'className',\n- anchorOriginTopLeftRectangle: 'className',\n- anchorOriginBottomLeftRectangle: 'className',\n- anchorOriginTopRightCircle: 'className',\n- anchorOriginBottomRightCircle: 'className',\n- anchorOriginTopLeftCircle: 'className',\n+ anchorOriginTopRightRectangular: 'className',\n+ anchorOriginBottomRightRectangular: 'className',\n+ anchorOriginTopLeftRectangular: 'className',\n+ anchorOriginBottomLeftRectangular: 'className',\n+ anchorOriginTopRightCircular: 'className',\n+ anchorOriginBottomRightCircular: 'className',\n+ anchorOriginTopLeftCircular: 'className',\n}}>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/badge-overlap-value <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#badge).\n\n#### `box-borderradius-values`\n\nUpdates the Box API from separate system props to `sx`.\n\n```diff\n-<Box borderRadius=\"borderRadius\">\n-<Box borderRadius={16}>\n+<Box borderRadius={1}>\n+<Box borderRadius=\"16px\">\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-borderradius-values <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `box-rename-css`\n\nRenames the Box `css` prop to `sx`\n\n```diff\n-<Box css={{ m: 2 }}>\n+<Box sx={{ m: 2 }}>\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-rename-css <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `box-rename-gap`\n\nRenames the Box `grid*Gap` props.\n\n```diff\n-<Box gridGap={2}>Item 3</Box>\n-<Box gridColumnGap={3}>Item 4</Box>\n-<Box gridRowGap={4}>Item 5</Box>\n+<Box gap={2}>Item 3</Box>\n+<Box columnGap={3}>Item 4</Box>\n+<Box rowGap={4}>Item 5</Box>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-rename-gap <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `button-color-prop`\n\nRemoves the outdated `color` prop values.\n\n```diff\n-<Button color=\"default\">\n+<Button>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/button-color-prop <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#button).\n\n#### `chip-variant-prop`\n\nRemoves the Chip `variant` prop if the value is `\"default\"`.\n\n```diff\n-<Chip variant=\"default\">\n+<Chip>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/chip-variant-prop <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#chip).\n\n#### `circularprogress-variant`\n\nRenames the CircularProgress `static` variant to `determinate`.\n\n```diff\n-<CircularProgress variant=\"static\" classes={{ static: 'className' }} />\n+<CircularProgress variant=\"determinate\" classes={{ determinate: 'className' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/circularprogress-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#circularprogress).\n\n#### `collapse-rename-collapsedheight`\n\nRenames `Collapse`'s `collapsedHeight` prop to `collapsedSize`.\n\n```diff\n-<Collapse collapsedHeight={40} />\n-<Collapse classes={{ container: 'collapse' }} />\n+<Collapse collapsedSize={40} />\n+<Collapse classes={{ root: 'collapse' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/collapse-rename-collapsedheight <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#collapse).\n\n#### `component-rename-prop`\n\nA generic codemod to rename any component prop.\n\n```diff\n-<Component prop=\"value\" />\n-<Component prop />\n+<Component newProp=\"value\" />\n+<Component newProp />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp\n```\n\n#### `core-styles-import`\n\nRenames private import from `core/styles/*` to `core/styles`\n\n```diff\n-import { darken, lighten } from '@material-ui/core/styles/colorManipulator';\n+import { darken, lighten } from '@material-ui/core/styles';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/core-styles-import <path>\n```\n\n#### `create-theme`\n\nRenames the function `createMuiTheme` to `createTheme`\n\n```diff\n-import { createMuiTheme } from '@material-ui/core/styles';\n+import { createTheme } from '@material-ui/core/styles';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/create-theme <path>\n```\n\n#### `dialog-props`\n\nRemove `disableBackdropClick` prop from `<Dialog>`\n\n```diff\n-<Dialog disableBackdropClick />\n+<Dialog />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/dialog-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#dialog).\n\n#### `dialog-title-props`\n\nRemove `disableTypography` prop from `<DialogTitle>`\n\n```diff\n-<DialogTitle disableTypography />\n+<DialogTitle />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/dialog-title-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#dialog).\n\n#### `emotion-prepend-cache`\n\nAdds `prepend: true` to emotion `createCache`\n\n```diff\nconst cache = emotionCreateCache({\n  key: 'css',\n+ prepend: true,\n});\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/create-theme <path>\n```\n\n#### `expansion-panel-component`\n\nRenames `ExpansionPanel*` to `Accordion*`\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/expansion-panel-component <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#expansionpanel).\n\n#### `fab-variant`\n\n```diff\n-<Fab variant=\"round\" />\n+<Fab variant=\"circular\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/fab-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#fab).\n\n#### `fade-rename-alpha`\n\nRenames the `fade` style utility import and calls to `alpha`.\n\n```diff\n-import { fade, lighten } from '@material-ui/core/styles';\n+import { alpha, lighten } from '@material-ui/core/styles';\n\n-const foo = fade('#aaa');\n+const foo = alpha('#aaa');\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/fade-rename-alpha <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#styles).\n\n#### `grid-justify-justifycontent`\n\nRenames `Grid`'s `justify` prop to `justifyContent`.\n\n```diff\n-<Grid justify=\"left\">Item</Grid>\n+<Grid item justifyContent=\"left\">Item</Grid>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/grid-justify-justifycontent <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#grid).\n\n#### `grid-list-component`\n\nRenames `GridList*` to `ImageList*`\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/grid-list-component <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#gridlist).\n\n#### `icon-button-size`\n\nAdds `size=\"large\"` if `size` is not defined to get the same appearance as v4.\n\n```diff\n-<IconButton size=\"medium\" />\n-<IconButton />\n+<IconButton size=\"medium\" />\n+<IconButton size=\"large\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/icon-button-size <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#iconbutton).\n\n#### `jss-to-styled`\n\nReplace JSS styling with `makeStyles` or `withStyles` to `styled` API.\n\n```diff\nimport Typography from '@material-ui/core/Typography';\n-import makeStyles from '@material-ui/styles/makeStyles';\n+import { styled } from '@material-ui/core/styles';\n\n-const useStyles = makeStyles((theme) => ({\n-  root: {\n-    display: 'flex',\n-    alignItems: 'center',\n-    backgroundColor: theme.palette.primary.main\n-  },\n-  cta: {\n-    borderRadius: theme.shape.radius.\n-  },\n-  content: {\n-    color: theme.palette.common.white,\n-    fontSize: 16,\n-    lineHeight: 1.7\n-  },\n-}))\n+const PREFIX = 'MyCard';\n+const classes = {\n+  root: `${PREFIX}-root`,\n+  cta: `${PREFIX}-cta`,\n+  content: `${PREFIX}-content`,\n+}\n+const Root = styled('div')((theme) => ({\n+  [`&.${classes.root}`]: {\n+    display: 'flex',\n+    alignItems: 'center',\n+    backgroundColor: theme.palette.primary.main\n+  },\n+  [`& .${classes.cta}`]: {\n+    borderRadius: theme.shape.radius.\n+  },\n+  [`& .${classes.content}`]: {\n+    color: theme.palette.common.white,\n+    fontSize: 16,\n+    lineHeight: 1.7\n+  },\n+}))\n\nexport const MyCard = () => {\n  const classes = useStyles();\n  return (\n-   <div className={classes.root}>\n+   <Root className={classes.root}>\n      <Typography className={classes.content}>...</Typography>\n      <Button className={classes.cta}>Go</Button>\n+   </Root>\n-   </div>\n  )\n}\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/jss-to-styled <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#1-use-styled-or-sx-api).\n\n> **Note:** This approach converts the first element in the return statement into styled component but also increases CSS specificity to override nested children.\n> This codemod should be adopted after handling all breaking changes, [check out the migration documentation](https://next.material-ui.com/guides/migration-v4/)\n\n#### `link-underline-hover`\n\nApply `underline=\"hover\"` to `<Link />` that does not define `underline` prop (to get the same behavior as in v4).\n\n```diff\n-<Link />\n+<Link underline=\"hover\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/icon-button-size <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#link).\n\n#### `material-ui-styles`\n\nMoves JSS imports to `@material-ui/styles`\n\n```diff\n-import {\n-  createGenerateClassName,\n-  createStyles,\n-  jssPreset,\n-  makeStyles,\n-  ServerStyleSheets,\n-  useThemeVariants,\n-  withStyles,\n-  withTheme,\n-  ThemeProvider,\n-  styled,\n-  getStylesCreator,\n-  mergeClasses,\n-} from '@material-ui/core/styles';\n+import { ThemeProvider, styled } from '@material-ui/core/styles';\n+import createGenerateClassName from '@material-ui/styles/createGenerateClassName';\n+import createStyles from '@material-ui/styles/createStyles';\n+import jssPreset from '@material-ui/styles/jssPreset';\n+import makeStyles from '@material-ui/styles/makeStyles';\n+import ServerStyleSheets from '@material-ui/styles/ServerStyleSheets';\n+import useThemeVariants from '@material-ui/styles/useThemeVariants';\n+import withStyles from '@material-ui/styles/withStyles';\n+import withTheme from '@material-ui/styles/withTheme';\n+import getStylesCreator from '@material-ui/styles/getStylesCreator';\nimport mergeClasses from '@material-ui/styles/mergeClasses';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/material-ui-styles <path>\n```\n\n#### `material-ui-types`\n\nRenames `Omit` import from `@material-ui/types` to `DistributiveOmit`\n\n```diff\n-import { Omit } from '@material-ui/types';\n+import { DistributiveOmit } from '@material-ui/types';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/material-ui-types <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-types).\n\n#### `modal-props`\n\nRemoves `disableBackdropClick` and `onEscapeKeyDown` from `<Modal>`\n\n```diff\n<Modal\n- disableBackdropClick\n- onEscapeKeyDown={handleEscapeKeyDown}\n/>\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/modal-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#modal).\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/moved-lab-modules <path>\n```\n\nYou can find more details about this breaking change in the migration guide.\n\n- [Alert](https://next.material-ui.com/guides/migration-v4/#alert)\n- [Autocomplete](https://next.material-ui.com/guides/migration-v4/#autocomplete)\n- [AvatarGroup](https://next.material-ui.com/guides/migration-v4/#avatar)\n- [Pagination](https://next.material-ui.com/guides/migration-v4/#pagination)\n- [Skeleton](https://next.material-ui.com/guides/migration-v4/#skeleton)\n- [SpeedDial](https://next.material-ui.com/guides/migration-v4/#speeddial)\n- [ToggleButton](https://next.material-ui.com/guides/migration-v4/#togglebutton)\n\n#### `pagination-round-circular`\n\nRenames `Pagination*`'s `shape` values from 'round' to 'circular'.\n\n```diff\n-<Pagination shape=\"round\" />\n-<PaginationItem shape=\"round\" />\n+<Pagination shape=\"circular\" />\n+<PaginationItem shape=\"circular\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/pagination-round-circular <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#pagination).\n\n#### `optimal-imports`\n\nFix private import paths.\n\n```diff\n-import red from '@material-ui/core/colors/red';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { red } from '@material-ui/core/colors';\n+import { createTheme } from '@material-ui/core/styles';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/optimal-imports <path>\n```\n\n#### `root-ref`\n\nRemoves `RootRef` from the codebase.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/root-ref <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#rootref).\n\n#### `skeleton-variant`\n\n```diff\n-<Skeleton vairiant=\"circle\" />\n-<Skeleton vairiant=\"rect\" />\n+<Skeleton vairiant=\"circular\" />\n+<Skeleton vairiant=\"rectangular\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/skeleton-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#skeleton).\n\n#### `styled-engine-provider`\n\nApplies `StyledEngineProvider` to the files that contains `ThemeProvider`.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/styled-engine-provider <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#style-library).\n\n#### `table-props`\n\nRenames props in `Table*` components.\n\n```diff\n-<>\n-  <TablePagination onChangeRowsPerPage={() => {}} onChangePage={() => {}} />\n-  <TablePagination classes={{ input: 'foo' }} />\n-  <Table padding=\"default\" />\n-  <TableCell padding=\"default\" />\n-</>\n+<>\n+  <TablePagination onRowsPerPageChange={() => {}} onPageChange={() => {}} />\n+  <TablePagination classes={{ select: 'foo' }} />\n+  <Table padding=\"normal\" />\n+  <TableCell padding=\"normal\" />\n+</>\n\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/table-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#table).\n\n#### `tabs-scroll-buttons`\n\nRenames the `Tabs`'s `scrollButtons` prop values.\n\n```diff\n-<Tabs scrollButtons=\"on\" />\n-<Tabs scrollButtons=\"desktop\" />\n-<Tabs scrollButtons=\"off\" />\n+<Tabs scrollButtons allowScrollButtonsMobile />\n+<Tabs scrollButtons />\n+<Tabs scrollButtons={false} />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/tabs-scroll-buttons <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#tabs).\n\n#### `textarea-minmax-rows`\n\nRenames `TextField`'s rows props.\n\n```diff\n-<TextField rowsMin={3} rowsMax={6} />\n-<TextareaAutosize rows={2} />\n-<TextareaAutosize rowsMin={3} rowsMax={6} />\n+<TextField minRows={3} maxRows={6} />\n+<TextareaAutosize minRows={2} />\n+<TextareaAutosize minRows={3} maxRows={6} />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/textarea-minmax-rows <path>\n```\n\nYou can find more details about this breaking change in the migration guide.\n\n- [TextareaAutosize](https://next.material-ui.com/guides/migration-v4/#textareaautoresize)\n- [TextField](https://next.material-ui.com/guides/migration-v4/#textfield)\n\n#### `theme-augment`\n\nAdds `DefaultTheme` module augmentation to typescript projects.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-augment <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-styles).\n\n#### `theme-breakpoints`\n\nUpdates breakpoint values to match new logic. ⚠️ This mod is not idempotent, it should be run only once.\n\n```diff\n-theme.breakpoints.down('sm')\n-theme.breakpoints.between('sm', 'md')\n+theme.breakpoints.down('md')\n+theme.breakpoints.between('sm', 'lg')\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-breakpoints <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-breakpoints-width`\n\nRenames `theme.breakpoints.width('md')` to `theme.breakpoints.values.md`.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-breakpoints-width <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-options`\n\n```diff\n-import { ThemeOptions } from '@material-ui/core';\n+import { DeprecatedThemeOptions } from '@material-ui/core';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-options <path>\n```\n\n#### `theme-palette-mode`\n\nRenames `type` to `mode`.\n\n```diff\n- { palette: { type: 'dark' } }\n+ { palette: { mode: 'dark' } }\n-theme.palette.type === 'dark'\n+theme.palette.mode === 'dark'\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-palette-mode <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-provider`\n\nRenames `MuiThemeProvider` to `ThemeProvider`.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-provider <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-core-styles).\n\n#### `theme-spacing`\n\nRemoves the 'px' suffix from some template strings.\n\n```diff\n-`${theme.spacing(2)}px`\n-`${theme.spacing(2)}px ${theme.spacing(4)}px`\n+`${theme.spacing(2)}`\n+`${theme.spacing(2)} ${theme.spacing(4)}`\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-spacing <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-typography-round`\n\nRenames `theme.typography.round($number)` to `Math.round($number * 1e5) / 1e5`.\n\n```diff\n-`${theme.typography.round($number)}`\n+`${Math.round($number * 1e5) / 1e5}`\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-typography-round <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `transitions`\n\nRenames import `transitions` to `createTransitions`\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/transitions <path>\n```\n\n#### `use-autocomplete`\n\nRenames `useAutocomplete` related import from lab to core\n\n```diff\n-import useAutocomplete from '@material-ui/lab/useAutocomplete';\n+import useAutocomplete from '@material-ui/core/useAutocomplete';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/use-autocomplete <path>\n```\n\n#### `use-transitionprops`\n\nUpdates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to replace the `onEnter*` and `onExit*` props.\n\n```diff\n<Dialog\n-  onEnter={onEnter}\n-  onEntered={onEntered}\n-  onEntering={onEntering}\n-  onExit={onExit}\n-  onExited={onExited}\n-  onExiting={onExiting}\n+  TransitionProps={{\n+    onEnter,\n+    onEntered,\n+    onEntering,\n+    onExit,\n+    onExited,\n+    onExiting,\n+  }}\n/>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/use-transitionprops <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](/guides/migration-v4/#dialog).\n\n#### `variant-prop`\n\n> Don't run this codemod if you already set `variant` to `outlined` or `filled` in theme default props.\n\nAdds the TextField, Select, and FormControl's `variant=\"standard\"` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n```\n\n```diff\n-<Select value=\"Standard\" />\n+<Select value=\"Standard\" variant=\"standard\" />\n```\n\n```diff\n-<FormControl value=\"Standard\" />\n+<FormControl value=\"Standard\" variant=\"standard\" />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/variant-prop <path>\n```\n\n#### `with-mobile-dialog`\n\nRemoves imported `withMobileDialog`, and inserts hardcoded version to prevent application crash.\n\n```diff\n- import withMobileDialog from '@material-ui/core/withMobileDialog';\n+ // FIXME checkout https://next.material-ui.com/guides/migration-v4/#dialog\n+ const withMobileDialog = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width=\"lg\" fullScreen={false} />;\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/with-mobile-dialog <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#dialog).\n\n#### `with-width`\n\nRemoves `withWidth` import, and inserts hardcoded version to prevent application crash.\n\n```diff\n- import withWidth from '@material-ui/core/withWidth';\n+ // FIXME checkout https://material-ui.com/components/use-media-query/#migrating-from-withwidth\n+ const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width=\"xs\" />;\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/with-width <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-core-styles).\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/theme-spacing-api <path>\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { withStyles, createTheme } from '@material-ui/core/styles';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/optimal-imports <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/top-level-imports <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/import-path <path>\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/color-imports <path>\n```\n\n**additional options**\n\n<!-- #default-branch-switch -->\n\n```\nnpx @material-ui/codemod@next v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/svg-icon-imports <path>\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v0.15.0/import-path <path>\n```\n","engines":{"node":">=12.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"siriwatknp","email":"siriwatkunaporn@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (darwin)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.0","dependencies":{"yargs":"^17.0.1","@babel/core":"^7.4.5","jscodeshift":"^0.13.0","@babel/runtime":"^7.4.4","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jscodeshift":"0.11.2"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-beta.3_1628481780489_0.29903382185135396","host":"s3://npm-registry-packages"}},"5.0.0-beta.4":{"name":"@material-ui/codemod","version":"5.0.0-beta.4","keywords":["react","react-component","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@5.0.0-beta.4","maintainers":[{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"siriwatknp","email":"siriwatkunaporn@gmail.com"},{"name":"michaldudak","email":"michal@dudak.me"}],"homepage":"https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"bin":{"codemod":"codemod.js"},"dist":{"shasum":"5ccc8914cf2d49a735a022af175213ed39011d68","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-5.0.0-beta.4.tgz","fileCount":254,"integrity":"sha512-k1olChypOjqGyiJkabHtur554oX0x4AQHw2dPdipKYZPsvOwC1mor9M0r1Hr9rTb3RaR2UzSI25hi5WCHZ6crw==","signatures":[{"sig":"MEYCIQCApW0xNMNpnQY+eiIi4d1G5Lpmab4ieER19zMxTZt64QIhAKXzK0v1gkuFBI0JevkBso479Sgfr+7ahGvbAiAYmtUt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFuS4CRA9TVsSAnZWagAAsZQQAJzs9Cun9dBmY0CQFmTd\nGvqZX6pvzh1jE1ZBoBVyZSy52cLE5USeZ1Jd2MFdjKhVG/BA6N5k6sLcN4H1\nPayABkMt08F8YalQcfzh6oFarGqk1CrhD94tYIdKHk16gmzq4j8ig9u1VORJ\naMPWo0k/xy058at+aMJLjEQut1IInCV0JZpASQ5xVYjrLs6UbFlMp22d9L77\n7TItpSzzouwahx52TG3IAIfB+Lbp1QS3MivHlwbrLbT5VjnbdUWrmiaTieei\nelGUpuHEC2GXythFO+OOTFqDmqda5Qou1yNPutR16xdiR51JxBQKpNIRC6G2\nNirn5mvcU0aeduJ83Z887OZTUhQk51bhxgtYI4n5D/V5FuzIXdsQEgULBFvb\nu4fWNRgN1BeRpbVAimBZ0dAxbJRuD1UssZja7nyJyZb2euR9rJ/wzAPJ0z/r\nifo9dL7bkMtlf/YyGCz/VzsWHoua0sOp3RotYqx/JFRltYN0bqbsUORf4PHq\nJAVD0hcYHgTBo3eTUmH7vo7NEnaeyVmrf4ay/tpDEH2nGUkH0SfmkGPBb1m+\nA9LdgkwLo6xWJfMWUOdjXlRFoeUgzA0w4JOkn5m+4SuMcu3PKmS80oM5ZXRa\njk2h6500YSV5mdarlxSeE3fdsfHPsJqBmu/XyzX82dolM6+nk7wSvENpgd9x\n+QB9\r\n=fuAU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[jscodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI APIs.\n\n## Setup & run\n\n<!-- #default-branch-switch -->\n\n```bash\nnpx @material-ui/codemod@next <codemod> <paths...>\n\nApplies a `@material-ui/codemod` to the specified paths\n\nPositionals:\n  codemod  The name of the codemod                                [string]\n  paths    Paths forwarded to `jscodeshift`                       [string]\n\nOptions:\n  --version  Show version number                                 [boolean]\n  --help     Show help                                           [boolean]\n  --dry      dry run (no changes are made to files)\n                                                [boolean] [default: false]\n  --print    print transformed files to stdout, useful for development\n                                                [boolean] [default: false]\n  --jscodeshift                                  [string] [default: false]\n\nExamples:\n  npx @material-ui/codemod@next v4.0.0/theme-spacing-api src\n  npx @material-ui/codemod@next v5.0.0/component-rename-prop src --\n  --component=Grid --from=prop --to=newProp\n```\n\n#### jscodeshift options\n\nTo pass more options directly to jscodeshift, use `--jscodeshift=\"...\"`. For example:\n\n```sh\nnpx @material-ui/codemod@next --jscodeshift=\"--run-in-band --verbose=2\"\n```\n\nSee all available options [here](https://github.com/facebook/jscodeshift#usage-cli).\n\n#### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough jscodeshift's `printOptions` command line argument\n\n```sh\nnpx @material-ui/codemod@next <transform> <path> --jscodeshift=\"--printOptions='{\\\"quote\\\":\\\"double\\\"}'\"\n```\n\n## Included scripts\n\n### v5.0.0\n\n#### 🚀 `preset-safe`\n\nA combination of all important transformers for migrating v4 to v5. ⚠️ This codemod should be run only once.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/preset-safe <path|folder>\n```\n\nThe list includes these transformers\n\n- [`adapter-v4`](#adapter-v4)\n- [`autocomplete-rename-closeicon`](#autocomplete-rename-closeicon)\n- [`autocomplete-rename-option`](#autocomplete-rename-option)\n- [`avatar-circle-circular`](#avatar-circle-circular)\n- [`badge-overlap-value`](#badge-overlap-value)\n- [`box-borderradius-values`](#box-borderradius-values)\n- [`box-rename-css`](#box-rename-css)\n- [`box-rename-gap`](#box-rename-gap)\n- [`button-color-prop`](#button-color-prop)\n- [`chip-variant-prop`](#chip-variant-prop)\n- [`circularprogress-variant`](#circularprogress-variant)\n- [`collapse-rename-collapsedheight`](#collapse-rename-collapsedheight)\n- [`core-styles-import`](#core-styles-import)\n- [`create-theme`](#create-theme)\n- [`dialog-props`](#dialog-props)\n- [`dialog-title-props`](#dialog-title-props)\n- [`emotion-prepend-cache`](#emotion-prepend-cache)\n- [`expansion-panel-component`](#expansion-panel-component)\n- [`fab-variant`](#fab-variant)\n- [`fade-rename-alpha`](#fade-rename-alpha)\n- [`grid-justify-justifycontent`](#grid-justify-justifycontent)\n- [`grid-list-component`](#grid-list-component)\n- [`icon-button-size`](#icon-button-size)\n- [`material-ui-styles`](#material-ui-styles)\n- [`material-ui-types`](#material-ui-types)\n- [`modal-props`](#modal-props)\n- [`moved-lab-modules`](#moved-lab-modules)\n- [`pagination-round-circular`](#pagination-round-circular)\n- [`optimal-imports`](#optimal-imports)\n- [`root-ref`](#root-ref)\n- [`skeleton-variant`](#skeleton-variant)\n- [`styled-engine-provider`](#styled-engine-provider)\n- [`table-props`](#table-props)\n- [`tabs-scroll-buttons`](#tabs-scroll-buttons)\n- [`textarea-minmax-rows`](#textarea-minmax-rows)\n- [`theme-augment`](#theme-augment)\n- [`theme-breakpoints`](#theme-breakpoints)\n- [`theme-breakpoints-width`](#theme-breakpoints-width)\n- [`theme-options`](#theme-options)\n- [`theme-palette-mode`](#theme-palette-mode)\n- [`theme-provider`](#theme-provider)\n- [`theme-spacing`](#theme-spacing)\n- [`theme-typography-round`](#theme-typography-round)\n- [`transitions`](#transitions)\n- [`use-autocomplete`](#use-autocomplete)\n- [`use-transitionprops`](#use-transitionprops)\n- [`with-mobile-dialog`](#with-mobile-dialog)\n- [`with-width`](#with-width)\n\n#### `adapter-v4`\n\nImports and inserts `adaptV4Theme` into `createTheme` (or `createMuiTheme`)\n\n```diff\n+import { adaptV4Theme } from '@material-ui/core/styles';\n\n-createTheme({ palette: { ... }})\n+createTheme(adaptV4Theme({ palette: { ... }}))\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/adapter-v4 <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `autocomplete-rename-closeicon`\n\nRenames `Autocomplete`'s `closeIcon` prop to `clearIcon`.\n\n```diff\n-<Autocomplete closeIcon={defaultClearIcon} />\n+<Autocomplete clearIcon={defaultClearIcon} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/autocomplete-rename-closeicon  <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#autocomplete).\n\n#### `autocomplete-rename-option`\n\nRenames `Autocomplete`'s `getOptionSelected` to `isOptionEqualToValue`.\n\n```diff\n<Autocomplete\n- getOptionSelected={(option, value) => option.title === value.title}\n+ isOptionEqualToValue={(option, value) => option.title === value.title}\n/>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/autocomplete-rename-option  <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#autocomplete).\n\n#### `avatar-circle-circular`\n\nUpdates the `Avatar`'s `variant` value and `classes` key from 'circle' to 'circular'.\n\n```diff\n-<Avatar variant=\"circle\" />\n-<Avatar classes={{ circle: 'className' }} />\n+<Avatar variant=\"circular\" />\n+<Avatar classes={{ circular: 'className' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/avatar-circle-circular <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#avatar).\n\n#### `badge-overlap-value`\n\nRenames the badge's props.\n\n```diff\n-<Badge overlap=\"circle\">\n-<Badge overlap=\"rectangle\">\n+<Badge overlap=\"circular\">\n+<Badge overlap=\"rectangular\">\n<Badge classes={{\n- anchorOriginTopRightRectangle: 'className',\n- anchorOriginBottomRightRectangle: 'className',\n- anchorOriginTopLeftRectangle: 'className',\n- anchorOriginBottomLeftRectangle: 'className',\n- anchorOriginTopRightCircle: 'className',\n- anchorOriginBottomRightCircle: 'className',\n- anchorOriginTopLeftCircle: 'className',\n+ anchorOriginTopRightRectangular: 'className',\n+ anchorOriginBottomRightRectangular: 'className',\n+ anchorOriginTopLeftRectangular: 'className',\n+ anchorOriginBottomLeftRectangular: 'className',\n+ anchorOriginTopRightCircular: 'className',\n+ anchorOriginBottomRightCircular: 'className',\n+ anchorOriginTopLeftCircular: 'className',\n}}>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/badge-overlap-value <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#badge).\n\n#### `box-borderradius-values`\n\nUpdates the Box API from separate system props to `sx`.\n\n```diff\n-<Box borderRadius=\"borderRadius\">\n-<Box borderRadius={16}>\n+<Box borderRadius={1}>\n+<Box borderRadius=\"16px\">\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-borderradius-values <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `box-rename-css`\n\nRenames the Box `css` prop to `sx`\n\n```diff\n-<Box css={{ m: 2 }}>\n+<Box sx={{ m: 2 }}>\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-rename-css <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `box-rename-gap`\n\nRenames the Box `grid*Gap` props.\n\n```diff\n-<Box gridGap={2}>Item 3</Box>\n-<Box gridColumnGap={3}>Item 4</Box>\n-<Box gridRowGap={4}>Item 5</Box>\n+<Box gap={2}>Item 3</Box>\n+<Box columnGap={3}>Item 4</Box>\n+<Box rowGap={4}>Item 5</Box>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/box-rename-gap <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#box).\n\n#### `button-color-prop`\n\nRemoves the outdated `color` prop values.\n\n```diff\n-<Button color=\"default\">\n+<Button>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/button-color-prop <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#button).\n\n#### `chip-variant-prop`\n\nRemoves the Chip `variant` prop if the value is `\"default\"`.\n\n```diff\n-<Chip variant=\"default\">\n+<Chip>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/chip-variant-prop <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#chip).\n\n#### `circularprogress-variant`\n\nRenames the CircularProgress `static` variant to `determinate`.\n\n```diff\n-<CircularProgress variant=\"static\" classes={{ static: 'className' }} />\n+<CircularProgress variant=\"determinate\" classes={{ determinate: 'className' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/circularprogress-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#circularprogress).\n\n#### `collapse-rename-collapsedheight`\n\nRenames `Collapse`'s `collapsedHeight` prop to `collapsedSize`.\n\n```diff\n-<Collapse collapsedHeight={40} />\n-<Collapse classes={{ container: 'collapse' }} />\n+<Collapse collapsedSize={40} />\n+<Collapse classes={{ root: 'collapse' }} />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/collapse-rename-collapsedheight <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#collapse).\n\n#### `component-rename-prop`\n\nA generic codemod to rename any component prop.\n\n```diff\n-<Component prop=\"value\" />\n-<Component prop />\n+<Component newProp=\"value\" />\n+<Component newProp />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp\n```\n\n#### `core-styles-import`\n\nRenames private import from `core/styles/*` to `core/styles`\n\n```diff\n-import { darken, lighten } from '@material-ui/core/styles/colorManipulator';\n+import { darken, lighten } from '@material-ui/core/styles';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/core-styles-import <path>\n```\n\n#### `create-theme`\n\nRenames the function `createMuiTheme` to `createTheme`\n\n```diff\n-import { createMuiTheme } from '@material-ui/core/styles';\n+import { createTheme } from '@material-ui/core/styles';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/create-theme <path>\n```\n\n#### `dialog-props`\n\nRemove `disableBackdropClick` prop from `<Dialog>`\n\n```diff\n-<Dialog disableBackdropClick />\n+<Dialog />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/dialog-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#dialog).\n\n#### `dialog-title-props`\n\nRemove `disableTypography` prop from `<DialogTitle>`\n\n```diff\n-<DialogTitle disableTypography />\n+<DialogTitle />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/dialog-title-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#dialog).\n\n#### `emotion-prepend-cache`\n\nAdds `prepend: true` to emotion `createCache`\n\n```diff\nconst cache = emotionCreateCache({\n  key: 'css',\n+ prepend: true,\n});\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/create-theme <path>\n```\n\n#### `expansion-panel-component`\n\nRenames `ExpansionPanel*` to `Accordion*`\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/expansion-panel-component <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#expansionpanel).\n\n#### `fab-variant`\n\n```diff\n-<Fab variant=\"round\" />\n+<Fab variant=\"circular\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/fab-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#fab).\n\n#### `fade-rename-alpha`\n\nRenames the `fade` style utility import and calls to `alpha`.\n\n```diff\n-import { fade, lighten } from '@material-ui/core/styles';\n+import { alpha, lighten } from '@material-ui/core/styles';\n\n-const foo = fade('#aaa');\n+const foo = alpha('#aaa');\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/fade-rename-alpha <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#styles).\n\n#### `grid-justify-justifycontent`\n\nRenames `Grid`'s `justify` prop to `justifyContent`.\n\n```diff\n-<Grid justify=\"left\">Item</Grid>\n+<Grid item justifyContent=\"left\">Item</Grid>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/grid-justify-justifycontent <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#grid).\n\n#### `grid-list-component`\n\nRenames `GridList*` to `ImageList*`\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/grid-list-component <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#gridlist).\n\n#### `icon-button-size`\n\nAdds `size=\"large\"` if `size` is not defined to get the same appearance as v4.\n\n```diff\n-<IconButton size=\"medium\" />\n-<IconButton />\n+<IconButton size=\"medium\" />\n+<IconButton size=\"large\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/icon-button-size <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#iconbutton).\n\n#### `jss-to-styled`\n\nReplace JSS styling with `makeStyles` or `withStyles` to `styled` API.\n\n```diff\nimport Typography from '@material-ui/core/Typography';\n-import makeStyles from '@material-ui/styles/makeStyles';\n+import { styled } from '@material-ui/core/styles';\n\n-const useStyles = makeStyles((theme) => ({\n-  root: {\n-    display: 'flex',\n-    alignItems: 'center',\n-    backgroundColor: theme.palette.primary.main\n-  },\n-  cta: {\n-    borderRadius: theme.shape.radius.\n-  },\n-  content: {\n-    color: theme.palette.common.white,\n-    fontSize: 16,\n-    lineHeight: 1.7\n-  },\n-}))\n+const PREFIX = 'MyCard';\n+const classes = {\n+  root: `${PREFIX}-root`,\n+  cta: `${PREFIX}-cta`,\n+  content: `${PREFIX}-content`,\n+}\n+const Root = styled('div')((theme) => ({\n+  [`&.${classes.root}`]: {\n+    display: 'flex',\n+    alignItems: 'center',\n+    backgroundColor: theme.palette.primary.main\n+  },\n+  [`& .${classes.cta}`]: {\n+    borderRadius: theme.shape.radius.\n+  },\n+  [`& .${classes.content}`]: {\n+    color: theme.palette.common.white,\n+    fontSize: 16,\n+    lineHeight: 1.7\n+  },\n+}))\n\nexport const MyCard = () => {\n  const classes = useStyles();\n  return (\n-   <div className={classes.root}>\n+   <Root className={classes.root}>\n      <Typography className={classes.content}>...</Typography>\n      <Button className={classes.cta}>Go</Button>\n+   </Root>\n-   </div>\n  )\n}\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/jss-to-styled <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#1-use-styled-or-sx-api).\n\n> **Note:** This approach converts the first element in the return statement into styled component but also increases CSS specificity to override nested children.\n> This codemod should be adopted after handling all breaking changes, [check out the migration documentation](https://next.material-ui.com/guides/migration-v4/)\n\n#### `link-underline-hover`\n\nApply `underline=\"hover\"` to `<Link />` that does not define `underline` prop (to get the same behavior as in v4).\n\n```diff\n-<Link />\n+<Link underline=\"hover\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/icon-button-size <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#link).\n\n#### `material-ui-styles`\n\nMoves JSS imports to `@material-ui/styles`\n\n```diff\n-import {\n-  createGenerateClassName,\n-  createStyles,\n-  jssPreset,\n-  makeStyles,\n-  ServerStyleSheets,\n-  useThemeVariants,\n-  withStyles,\n-  withTheme,\n-  ThemeProvider,\n-  styled,\n-  getStylesCreator,\n-  mergeClasses,\n-} from '@material-ui/core/styles';\n+import { ThemeProvider, styled } from '@material-ui/core/styles';\n+import createGenerateClassName from '@material-ui/styles/createGenerateClassName';\n+import createStyles from '@material-ui/styles/createStyles';\n+import jssPreset from '@material-ui/styles/jssPreset';\n+import makeStyles from '@material-ui/styles/makeStyles';\n+import ServerStyleSheets from '@material-ui/styles/ServerStyleSheets';\n+import useThemeVariants from '@material-ui/styles/useThemeVariants';\n+import withStyles from '@material-ui/styles/withStyles';\n+import withTheme from '@material-ui/styles/withTheme';\n+import getStylesCreator from '@material-ui/styles/getStylesCreator';\nimport mergeClasses from '@material-ui/styles/mergeClasses';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/material-ui-styles <path>\n```\n\n#### `material-ui-types`\n\nRenames `Omit` import from `@material-ui/types` to `DistributiveOmit`\n\n```diff\n-import { Omit } from '@material-ui/types';\n+import { DistributiveOmit } from '@material-ui/types';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/material-ui-types <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-types).\n\n#### `modal-props`\n\nRemoves `disableBackdropClick` and `onEscapeKeyDown` from `<Modal>`\n\n```diff\n<Modal\n- disableBackdropClick\n- onEscapeKeyDown={handleEscapeKeyDown}\n/>\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/modal-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#modal).\n\n#### `moved-lab-modules`\n\nUpdates all imports for `@material-ui/lab` components that have moved to `@material-ui/core`.\n\n```diff\n-import Skeleton from '@material-ui/lab/Skeleton';\n+import Skeleton from '@material-ui/core/Skeleton';\n```\n\nor\n\n```diff\n-import { SpeedDial } from '@material-ui/lab';\n+import { SpeedDial } from '@material-ui/core';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/moved-lab-modules <path>\n```\n\nYou can find more details about this breaking change in the migration guide.\n\n- [Alert](https://next.material-ui.com/guides/migration-v4/#alert)\n- [Autocomplete](https://next.material-ui.com/guides/migration-v4/#autocomplete)\n- [AvatarGroup](https://next.material-ui.com/guides/migration-v4/#avatar)\n- [Pagination](https://next.material-ui.com/guides/migration-v4/#pagination)\n- [Skeleton](https://next.material-ui.com/guides/migration-v4/#skeleton)\n- [SpeedDial](https://next.material-ui.com/guides/migration-v4/#speeddial)\n- [ToggleButton](https://next.material-ui.com/guides/migration-v4/#togglebutton)\n\n#### `pagination-round-circular`\n\nRenames `Pagination*`'s `shape` values from 'round' to 'circular'.\n\n```diff\n-<Pagination shape=\"round\" />\n-<PaginationItem shape=\"round\" />\n+<Pagination shape=\"circular\" />\n+<PaginationItem shape=\"circular\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/pagination-round-circular <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#pagination).\n\n#### `optimal-imports`\n\nFix private import paths.\n\n```diff\n-import red from '@material-ui/core/colors/red';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { red } from '@material-ui/core/colors';\n+import { createTheme } from '@material-ui/core/styles';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/optimal-imports <path>\n```\n\n#### `root-ref`\n\nRemoves `RootRef` from the codebase.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/root-ref <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#rootref).\n\n#### `skeleton-variant`\n\n```diff\n-<Skeleton vairiant=\"circle\" />\n-<Skeleton vairiant=\"rect\" />\n+<Skeleton vairiant=\"circular\" />\n+<Skeleton vairiant=\"rectangular\" />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/skeleton-variant <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#skeleton).\n\n#### `styled-engine-provider`\n\nApplies `StyledEngineProvider` to the files that contains `ThemeProvider`.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/styled-engine-provider <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#style-library).\n\n#### `table-props`\n\nRenames props in `Table*` components.\n\n```diff\n-<>\n-  <TablePagination onChangeRowsPerPage={() => {}} onChangePage={() => {}} />\n-  <TablePagination classes={{ input: 'foo' }} />\n-  <Table padding=\"default\" />\n-  <TableCell padding=\"default\" />\n-</>\n+<>\n+  <TablePagination onRowsPerPageChange={() => {}} onPageChange={() => {}} />\n+  <TablePagination classes={{ select: 'foo' }} />\n+  <Table padding=\"normal\" />\n+  <TableCell padding=\"normal\" />\n+</>\n\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/table-props <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#table).\n\n#### `tabs-scroll-buttons`\n\nRenames the `Tabs`'s `scrollButtons` prop values.\n\n```diff\n-<Tabs scrollButtons=\"on\" />\n-<Tabs scrollButtons=\"desktop\" />\n-<Tabs scrollButtons=\"off\" />\n+<Tabs scrollButtons allowScrollButtonsMobile />\n+<Tabs scrollButtons />\n+<Tabs scrollButtons={false} />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/tabs-scroll-buttons <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#tabs).\n\n#### `textarea-minmax-rows`\n\nRenames `TextField`'s rows props.\n\n```diff\n-<TextField rowsMin={3} rowsMax={6} />\n-<TextareaAutosize rows={2} />\n-<TextareaAutosize rowsMin={3} rowsMax={6} />\n+<TextField minRows={3} maxRows={6} />\n+<TextareaAutosize minRows={2} />\n+<TextareaAutosize minRows={3} maxRows={6} />\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/textarea-minmax-rows <path>\n```\n\nYou can find more details about this breaking change in the migration guide.\n\n- [TextareaAutosize](https://next.material-ui.com/guides/migration-v4/#textareaautoresize)\n- [TextField](https://next.material-ui.com/guides/migration-v4/#textfield)\n\n#### `theme-augment`\n\nAdds `DefaultTheme` module augmentation to typescript projects.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-augment <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-styles).\n\n#### `theme-breakpoints`\n\nUpdates breakpoint values to match new logic. ⚠️ This mod is not idempotent, it should be run only once.\n\n```diff\n-theme.breakpoints.down('sm')\n-theme.breakpoints.between('sm', 'md')\n+theme.breakpoints.down('md')\n+theme.breakpoints.between('sm', 'lg')\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-breakpoints <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-breakpoints-width`\n\nRenames `theme.breakpoints.width('md')` to `theme.breakpoints.values.md`.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-breakpoints-width <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-options`\n\n```diff\n-import { ThemeOptions } from '@material-ui/core';\n+import { DeprecatedThemeOptions } from '@material-ui/core';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-options <path>\n```\n\n#### `theme-palette-mode`\n\nRenames `type` to `mode`.\n\n```diff\n- { palette: { type: 'dark' } }\n+ { palette: { mode: 'dark' } }\n-theme.palette.type === 'dark'\n+theme.palette.mode === 'dark'\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-palette-mode <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-provider`\n\nRenames `MuiThemeProvider` to `ThemeProvider`.\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-provider <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-core-styles).\n\n#### `theme-spacing`\n\nRemoves the 'px' suffix from some template strings.\n\n```diff\n-`${theme.spacing(2)}px`\n-`${theme.spacing(2)}px ${theme.spacing(4)}px`\n+`${theme.spacing(2)}`\n+`${theme.spacing(2)} ${theme.spacing(4)}`\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-spacing <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `theme-typography-round`\n\nRenames `theme.typography.round($number)` to `Math.round($number * 1e5) / 1e5`.\n\n```diff\n-`${theme.typography.round($number)}`\n+`${Math.round($number * 1e5) / 1e5}`\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/theme-typography-round <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#theme).\n\n#### `transitions`\n\nRenames import `transitions` to `createTransitions`\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/transitions <path>\n```\n\n#### `use-autocomplete`\n\nRenames `useAutocomplete` related import from lab to core\n\n```diff\n-import useAutocomplete from '@material-ui/lab/useAutocomplete';\n+import useAutocomplete from '@material-ui/core/useAutocomplete';\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/use-autocomplete <path>\n```\n\n#### `use-transitionprops`\n\nUpdates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to replace the `onEnter*` and `onExit*` props.\n\n```diff\n<Dialog\n-  onEnter={onEnter}\n-  onEntered={onEntered}\n-  onEntering={onEntering}\n-  onExit={onExit}\n-  onExited={onExited}\n-  onExiting={onExiting}\n+  TransitionProps={{\n+    onEnter,\n+    onEntered,\n+    onEntering,\n+    onExit,\n+    onExited,\n+    onExiting,\n+  }}\n/>\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/use-transitionprops <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](/guides/migration-v4/#dialog).\n\n#### `variant-prop`\n\n> Don't run this codemod if you already set `variant` to `outlined` or `filled` in theme default props.\n\nAdds the TextField, Select, and FormControl's `variant=\"standard\"` prop when `variant` is undefined.\nThe diff should look like this:\n\n```diff\n-<TextField value=\"Standard\" />\n+<TextField value=\"Standard\" variant=\"standard\" />\n```\n\n```diff\n-<Select value=\"Standard\" />\n+<Select value=\"Standard\" variant=\"standard\" />\n```\n\n```diff\n-<FormControl value=\"Standard\" />\n+<FormControl value=\"Standard\" variant=\"standard\" />\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/variant-prop <path>\n```\n\n#### `with-mobile-dialog`\n\nRemoves imported `withMobileDialog`, and inserts hardcoded version to prevent application crash.\n\n```diff\n- import withMobileDialog from '@material-ui/core/withMobileDialog';\n+ // FIXME checkout https://next.material-ui.com/guides/migration-v4/#dialog\n+ const withMobileDialog = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width=\"lg\" fullScreen={false} />;\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/with-mobile-dialog <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#dialog).\n\n#### `with-width`\n\nRemoves `withWidth` import, and inserts hardcoded version to prevent application crash.\n\n```diff\n- import withWidth from '@material-ui/core/withWidth';\n+ // FIXME checkout https://material-ui.com/components/use-media-query/#migrating-from-withwidth\n+ const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width=\"xs\" />;\n```\n\n```sh\nnpx @material-ui/codemod@next v5.0.0/with-width <path>\n```\n\nYou can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#material-ui-core-styles).\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/theme-spacing-api <path>\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { withStyles, createTheme } from '@material-ui/core/styles';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/optimal-imports <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v4.0.0/top-level-imports <path>\n```\n\nHead to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/import-path <path>\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/color-imports <path>\n```\n\n**additional options**\n\n<!-- #default-branch-switch -->\n\n```\nnpx @material-ui/codemod@next v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v1.0.0/svg-icon-imports <path>\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n<!-- #default-branch-switch -->\n\n```sh\nnpx @material-ui/codemod@next v0.15.0/import-path <path>\n```\n","engines":{"node":">=12.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build","release":"yarn build && npm publish --tag next","prebuild":"rimraf build"},"_npmUser":{"name":"michaldudak","email":"michal@dudak.me"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/4.0.0/node@v14.17.0+x64 (darwin)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.0","dependencies":{"yargs":"^17.0.1","@babel/core":"^7.15.0","jscodeshift":"^0.13.0","@babel/runtime":"^7.14.8","@babel/traverse":"^7.15.0","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jscodeshift":"0.11.2"},"_npmOperationalInternal":{"tmp":"tmp/codemod_5.0.0-beta.4_1628890296728_0.3996600548368634","host":"s3://npm-registry-packages"}},"4.5.1":{"name":"@material-ui/codemod","version":"4.5.1","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"author":{"name":"Material-UI Team"},"license":"MIT","_id":"@material-ui/codemod@4.5.1","maintainers":[{"name":"oliviertassinari","email":"olivier.tassinari@gmail.com"},{"name":"hai-cea","email":"hai@call-em-all.com"},{"name":"mbrookes","email":"npm@nospam.33m.co"},{"name":"joshwooding","email":"joshwooding.npm@gmail.com"},{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},{"name":"mnajdova","email":"mnajdova@gmail.com"},{"name":"siriwatknp","email":"siriwatkunaporn@gmail.com"},{"name":"michaldudak","email":"michal@dudak.me"}],"homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"dist":{"shasum":"5be24c352897a4018e817f4d65416041234430c3","tarball":"https://registry.npmjs.org/@material-ui/codemod/-/codemod-4.5.1.tgz","fileCount":28,"integrity":"sha512-JkZJ+28tNIg/1ecTNO5aul0UmXlsSjKN+WaY0L6eBXTpRpfHj1dnOg8C6QYI2IJoxDr0juZ74Kafwu1EcS/ICw==","signatures":[{"sig":"MEYCIQCkz83nIKL3sI3uVE7b/miZPlI6a2Jl1prF19EkJ/bengIhAL7JMVMlYb4W22JsYmVuCcJXoMpVhR3ArRQ4RSXsUpFc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSbEvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofcQ//YlyvZAOO8zNtUnWPyYFkntv4UtmH6YpyEU0nIAwP+WGUEhR/\r\n2yjbkPih0RI13+5M2vq3/o8YUSYZ/5LErJAewNEm6og4+gaTxsVW0B41MbAT\r\nlHIHhBP3930m7jt0tGdhnc5xA2WVfyh65hT3eC0yGhUAvG3dkQTDKljb12UN\r\n4WgN/Dd9erwx4ambDjkwzLMEYvL+UwM0eUk6GOsbWscWpliT3Dae1wxsoKBu\r\nBSO2TskjAXajeyo2ynolq66KnvLdPtOzULYWrxfwCcsljrhI7C7DSgM0bdth\r\nNr9/CfQRVrClR5xlbl5K20aVZCBnvGsA4Zdm5KoJNgUV1lumaC2Ub24yvgqm\r\nLiGb6jxFop2QqP7lSBCNN+z99PkmwOfGqxMGp9toU+rLdxLARo1ickkctHD4\r\nilJnyHKsEPOTP+FIxuafYblfDhqe7NWrwgelil8rWi30PVQBkbY0TCKuKXKf\r\nUTm5hFlmmZHgwaUiNUWEpAOmsmnf8gfK8SkY9N16MI3PH//Oz2fxCPHJYUxD\r\nGhNPZpKcumojSVA3m1XwhQrKYO0NpRDvbvDjIAx1+JBunpHQzs4f68EkZrUl\r\nOPZoDA3wEPgjy2Ro1aPe+g9UaTp0UlX1+Lc0p+23/yGRCLVd/S13lEbtU1Ig\r\nlS4aR7/QhdG50q+57Rsve8PZjmWFPls/HxE=\r\n=3NR5\r\n-----END PGP SIGNATURE-----\r\n"},"engines":{"node":">=8.0.0"},"private":false,"scripts":{"test":"cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-codemod/**/*.test.js'","build":"node ../../scripts/build cjs --out-dir ./build && cpy README.md build && cpy package.json build","release":"yarn build && npm publish","prebuild":"rimraf lib"},"_npmUser":{"name":"eps1lon","email":"silbermann.sebastian@gmail.com"},"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"_npmVersion":"lerna/3.22.0/node@v14.18.3+x64 (linux)","description":"Codemod scripts for Material-UI.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"@babel/core":"^7.4.5","@babel/traverse":"^7.6.2","jscodeshift-add-imports":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jscodeshift":"^0.10.0"},"_npmOperationalInternal":{"tmp":"tmp/codemod_4.5.1_1648996654827_0.04041079550275328","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-04-08T14:38:58.926Z","modified":"2025-09-14T10:57:44.337Z","1.0.0-beta.41":"2018-04-08T14:38:59.120Z","1.0.0-beta.45":"2018-05-06T15:51:05.554Z","1.0.0-rc.0":"2018-05-13T19:12:23.319Z","1.0.0":"2018-05-17T22:06:11.913Z","1.1.0":"2018-05-26T14:54:14.170Z","4.0.1":"2019-05-27T12:41:47.314Z","4.0.2":"2019-06-03T16:27:36.848Z","4.3.0":"2019-07-28T14:29:51.517Z","4.5.0":"2019-10-02T07:58:14.372Z","5.0.0-alpha.1":"2020-06-27T15:02:09.022Z","5.0.0-alpha.16":"2020-11-14T12:01:14.474Z","5.0.0-alpha.17":"2020-11-23T00:15:29.591Z","5.0.0-alpha.19":"2020-12-13T17:20:51.814Z","5.0.0-alpha.20":"2020-12-21T17:45:20.253Z","5.0.0-alpha.21":"2020-12-30T17:33:09.945Z","5.0.0-alpha.22":"2021-01-04T11:15:32.675Z","5.0.0-alpha.23":"2021-01-14T12:49:43.502Z","5.0.0-alpha.24":"2021-01-26T14:08:22.564Z","5.0.0-alpha.27":"2021-03-05T13:00:57.349Z","5.0.0-alpha.28":"2021-04-12T09:46:09.226Z","5.0.0-alpha.29":"2021-04-20T13:57:44.907Z","5.0.0-alpha.30":"2021-04-27T12:59:09.172Z","5.0.0-alpha.33":"2021-05-09T12:26:22.781Z","5.0.0-alpha.35":"2021-05-31T20:34:17.991Z","5.0.0-beta.0":"2021-07-01T12:12:36.911Z","5.0.0-beta.1":"2021-07-21T09:18:19.576Z","5.0.0-beta.2":"2021-07-26T15:01:19.290Z","5.0.0-beta.3":"2021-08-09T04:03:00.611Z","5.0.0-beta.4":"2021-08-13T21:31:36.916Z","4.5.1":"2022-04-03T14:37:35.193Z"},"bugs":{"url":"https://github.com/mui-org/material-ui/issues"},"author":{"name":"Material-UI Team"},"license":"MIT","homepage":"https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod","keywords":["react","react-component","material design","material-ui","codemod","jscodeshift"],"repository":{"url":"git+https://github.com/mui-org/material-ui.git","type":"git","directory":"packages/material-ui-codemod"},"description":"Codemod scripts for Material-UI.","maintainers":[{"email":"olivier.tassinari@gmail.com","name":"oliviertassinari"}],"readme":"# @material-ui/codemod\n\n> Codemod scripts for Material-UI\n\n[![npm version](https://img.shields.io/npm/v/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n[![npm downloads](https://img.shields.io/npm/dm/@material-ui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@material-ui/codemod)\n\nThis repository contains a collection of codemod scripts based for use with\n[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Material-UI\nAPIs.\n\n## Setup & Run\n\n- `npm install -D @material-ui/codemod`\n- `npx jscodeshift -t <codemod-script> <path>`\n- Use the `-d` option for a dry-run and use `-p` to print the output\n  for comparison\n\n## Included Scripts\n\n### v4.0.0\n\n#### `theme-spacing-api`\n\nUpdates the `theme-spacing-api` from `theme.spacing.unit x` to `theme.spacing(x)`.\nThe diff should look like this:\n\n```diff\n-const spacing = theme.spacing.unit;\n+const spacing = theme.spacing(1);\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/theme-spacing-api.js\n```\n\nThis codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.\n\n```diff\n-const spacing = theme.spacing.unit / 5;\n+const spacing = theme.spacing(0.2);\n\n// Limitation\n-const spacing = theme.spacing.unit * 5 * 5;\n+const spacing = theme.spacing(5) * 5;\n```\n\n#### `optimal-imports`\n\nConverts all `@material-ui/core` imports more than 1 level deep to the optimal form for tree shaking:\n\n```diff\n-import withStyles from '@material-ui/core/styles/withStyles';\n-import createTheme from '@material-ui/core/styles/createTheme';\n+import { withStyles, createTheme } from '@material-ui/core/styles';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/optimal-imports.js\n```\n\nHead to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n#### `top-level-imports`\n\nConverts all `@material-ui/core` submodule imports to the root module:\n\n```diff\n-import List from '@material-ui/core/List';\n-import { withStyles } from '@material-ui/core/styles';\n+import { List, withStyles } from '@material-ui/core';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/top-level-imports.js\n```\n\nHead to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.\n\n### v1.0.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v1.0.0 flatten the import paths.\nThe diff should look like this:\n\n```diff\n-import { MenuItem } from '@material-ui/core/Menu';\n+import MenuItem from '@material-ui/core/MenuItem';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/import-path.js\n```\n\n**Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:\n\n```diff\n-import Typography from 'material-ui/Typography';\n+import Typography from '@material-ui/core/Typography';\n```\n\nSubsequently, you can run the above `find ...` command to flatten your imports.\n\n#### `color-imports`\n\nUpdates the `color-imports` for the new location of Material-UI color palettes.\nThe diff should look like this:\n\n```diff\n-import { blue, teal500 } from 'material-ui/styles/colors';\n+import blue from '@material-ui/core/colors/blue';\n+import teal from '@material-ui/core/colors/teal';\n+const teal500 = teal['500'];\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/color-imports.js\n```\n\n**additional options**\n\n```\nnpx jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'\n```\n\n#### `svg-icon-imports`\n\nUpdates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons) package.\nThe diff should look like this:\n\n```diff\n-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';\n-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';\n+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\n+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/svg-icon-imports.js\n```\n\n### v0.15.0\n\n#### `import-path`\n\nUpdates the `import-paths` for the new location of the components.\nMaterial-UI v0.15.0 is reorganizing the folder distribution of the project.\nThe diff should look like this:\n\n```diff\n// From the source\n-import FlatButton from 'material-ui/src/flat-button';\n+import FlatButton from 'material-ui/src/FlatButton';\n\n// From npm\n-import RaisedButton from 'material-ui/lib/raised-button';\n+import RaisedButton from 'material-ui/RaisedButton';\n```\n\n```sh\nfind src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v0.15.0/import-path.js\n```\n\n### Recast Options\n\nOptions to [recast](https://github.com/benjamn/recast)'s printer can be provided\nthrough the `printOptions` command line argument:\n\n```sh\nnpx jscodeshift -t transform.js <path> --printOptions='{\"quote\": \"double\", \"trailingComma\": false}'\n```\n","readmeFilename":"README.md"}