{"_id":"@fluentui/react-make-styles","_rev":"191-80ec4e9bba16c605c42b9cd7b973a5fd","name":"@fluentui/react-make-styles","dist-tags":{"alpha":"9.0.0-alpha.78","latest":"9.0.0-beta.4","beta":"9.0.0-beta.4","nightly":"0.0.0-nightly946f57cad420220203.1"},"versions":{"0.2.0":{"name":"@fluentui/react-make-styles","version":"0.2.0","license":"MIT","_id":"@fluentui/react-make-styles@0.2.0","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4d693d7186bda178d1a2365d9c4e95889b979d70","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.0.tgz","fileCount":33,"integrity":"sha512-JTSJHm1XJD63liDbbQgUGXA6zOpmeiIDsOJAy0u095zsqsHA0pNauvl2YjlEDcm1/ShTenBm3Ex6+FU7VXh9Iw==","signatures":[{"sig":"MEUCIC2D8G5UnI2n/3jzqXngh4prFs1oPnDDm3GGzes4NRX5AiEA6m0xFNMhlA7z25jVkjHf1zy9vdOiBhUrsIhw36eXbLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGymhCRA9TVsSAnZWagAAR3sP/05Izlu+BmViD5drGUu2\n6xRR+Rvhd9/GlAYv8INmAe+KTAFPKUTF2rxqmlDTzpNOr7h712u7mmfQJRq9\nGfWdbvjyNX/hifARmFDLwEdy/ADKBrkmH0TDk6VYOIh5ed0e+IUzXE8ovJ8H\ny1okYHtxoT9vzileMAzwX4UmGAHBrBiZzhzOQ8Nq2Q08YogX0zyNmvytLzN8\n4U7OOyDcaYNqP7wV4p+IbONBeSh1SZlogs28RWQ0enWZMqM3Ectg3yuu+zxe\nxnC1qlaEqBpfx/c26qjT1RwygOs3UBua2ysG4FltrT235aq1U6BY14HMVV+i\nhiQCRgaPvby+5T7F62drjmLwtiA9gwztmbxmbIXSowGbQ1ce/teS/R6s/3V4\ncOpCd+QpY7/YM87AGzqfga130uki79SdDr07rHmXi9XtwVpu/SIggJ1epL8m\nmhWIVPhH7YIMr0KQBQkZI3nUBD/wbzIDdOE8m1iTLC7Zxgc0dzCO/EPnsfZg\nh2l8gTXLO7UM3Eh7nw85yU++qtN8Bn/XGUC5+F3oXw/pU4J3TrybsGGF7cXM\n9YqyFOHpraBI3bi9B/mi9scw5dKev86gSaG9F2HEc4gwQNrk9BDArK9r+Xw4\n9zq9WgWsBuwHONoriFFqkIL5khIWZyi5nmCIJZho96/8ZcfF/WR0Bb4bL6Fw\nvXSq\r\n=SU2X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.5.0","@fluentui/react-theme":"^0.2.0","@fluentui/set-version":"^8.0.0-beta.1","@fluentui/react-provider":"^0.1.0","@fluentui/react-theme-provider":"^1.0.0-beta.19"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.1"},"peerDependencies":{"react":">=16.8.0 <17.0.0","@types/react":">=16.8.0 <17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.0_1612392865474_0.23737032900488186","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"@fluentui/react-make-styles","version":"0.2.1","license":"MIT","_id":"@fluentui/react-make-styles@0.2.1","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"54d1ad4c602a1bc81c3074b0e46a10cb19b0c7ed","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.1.tgz","fileCount":33,"integrity":"sha512-v0c1ZbDBYNg7wSHNpbQrl1N8VDhymAC2Y6HyT00RqZ4Er8MEqp1TAQFaGy4+sVRYhccka5hGhzB6+XIRXywMbg==","signatures":[{"sig":"MEUCIQDx/yAQFvI2uQ07W5Lw9a3wBcJbLInPv5e2Bis3ugDNiwIgNf3SQFPHDfcbK+vdhBQEfu27D6r6+P5uZY9Szc/3m8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG010CRA9TVsSAnZWagAAwgwP/jApp1xD0LG4AphHp4kZ\n8eYFjw1pel4ATguiu0ZHucrOfgEURl20zHNZdCSOb1o4HZuCFPUCTDqkUw5O\nEkoQ82oBupJyzhZmXlBTuhxc2FIkkiE6z3fykS2dxZooTJoQaoyz899ucwUi\nsy4XK5qyNeL/r14uIvm9h9fg63utBguT9wm46hxr46H4pGi7omjMbvacWMC5\ntZyjm51/+2LGpYvovbwTPIwicRvyE+WcVNOujtk5cJLgV5OMpbzM5MdNmU/Q\nC10EP27z2oCyCYlFMwaBQb6IpIA4fNDQTCpjGt2dRAuxumVwgwHgczD2y3lw\nf70XoXnnwfkp6EhBIsQXVa2MD9JqW3H6nByPXaaRSaIgXMZECyz3WL0vzbkB\nW+C9r1ljBwjuqhd1QdvanMkIABDfGEU7E6A01qdCnjKh28DvpHf0Tcxrh+Ro\n3NCp31EWpVkzS8PIzU2aAwpAxq6yKDv1ax+nZnDUbxwxx/mlKTXu4X4QA+Jp\nbvIbOseXUJygvtxJ0FyDnSMBzqMnB/py6c4B7BeRYQwXVZRBg6LLRGqR4VN0\ntpqlBLK4r/3VQ/zXJrAuAvOKdWEFSUaXXdrC6+vKC1Uc0dbCOIQriA2t1B40\nmIYZKo1572686s27oS5D7kIdR0QqdrtoslwyjCV16RKsnCxBZmK98S5dJwfj\nvk6P\r\n=F4jB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.5.0","@fluentui/react-theme":"^0.2.0","@fluentui/set-version":"^8.0.0-beta.1","@fluentui/react-provider":"^0.1.1","@fluentui/react-theme-provider":"^1.0.0-beta.19"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.1"},"peerDependencies":{"react":">=16.8.0 <17.0.0","@types/react":">=16.8.0 <17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.1_1612402036494_0.4561198727852225","host":"s3://npm-registry-packages"}},"0.2.2":{"name":"@fluentui/react-make-styles","version":"0.2.2","license":"MIT","_id":"@fluentui/react-make-styles@0.2.2","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"0a7281b349b656574ff47a4034f903f1fc8b5f03","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.2.tgz","fileCount":33,"integrity":"sha512-SR7N6x1C+R+Bocx/wpdpMOqzjiFEZx04YTGX8bR9fKNkIjvIl/Bvvev5ZDq59UBlgqKaqfG9/F8iqPgot4gNzw==","signatures":[{"sig":"MEQCICcCRWxbVQLsDzT8b7jmXV7C+Dni6qlAPo2omYY8PIuqAiB9sZAUlSV6N3GRuJ0KU4tZH+qIifvooBbXee8+3uU5qQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHTfmCRA9TVsSAnZWagAAg0QP/1tIZaBE9DIPw4TR0x8K\nJ19ZSnScRCBkDZzc/DOwRyN4ov1WFkXxwZ8Za50zJGW09jliDeNKxufa3ZgY\ndkLE2BXhWPDwUhCL0+kNIKyrsGstDUXoB3hpTplm9EJDnCtNd12ofXDHPpfT\nz6lSHkWRrpB4iXtdRlCe15Jn8YXAa3H8j77Qri6NUo8LzrtsW02Uez73RvSJ\nEhFBTlPuY5y2vWdkCh7GrrdEdp/oqtSgsH0GFz54f4XJGya6z0bXdQwZd9W2\n+/gOiJfaEnY2jfII4sTB6tSwWeKTTrOJQgd/y79W4agj/CdAvqaixi6Llu0W\nY7TRR3HpYgp/zRWj7JbQRaK+87pRuU02JGIZ5cZEJl3n99aoxsUNoRRB08PD\n7oq630J8OmXxBXgutkXwkKXbJD9YitOc/6b3rsMs5AMfYIZZSv5e2Dj9tERa\nxzY50WZIN+S2rmNIMc05+MA0W9b5xEV3PrePqyz/g29+hqrO8IvnNntqkdPA\noqftx6Jc8q7wzqV2lqImIqu64sm76o32wUx3wZE8xzCzrm2HLJEWS01duSMZ\ncH3aLZZgn/jRdTlXicidmW2B9dZYfZc7llEZZoXV4Mr4PAZzyBNT+F3WygGp\ndVcDeBTZMCSHvTgHmU0AYW0BaH4xDWKiolemZJ8jcOaAQ8jpvcoiYifAXrXJ\n7e97\r\n=WQbc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.5.0","@fluentui/react-theme":"^0.2.0","@fluentui/set-version":"^8.0.0-beta.1","@fluentui/react-provider":"^0.1.1","@fluentui/react-theme-provider":"^1.0.0-beta.19"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.1"},"peerDependencies":{"react":">=16.8.0 <17.0.0","@types/react":">=16.8.0 <17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.2_1612527589744_0.10899085573059053","host":"s3://npm-registry-packages"}},"0.2.3":{"name":"@fluentui/react-make-styles","version":"0.2.3","license":"MIT","_id":"@fluentui/react-make-styles@0.2.3","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"8648ef3b226168c0c8e4cca33015e267f0059097","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.3.tgz","fileCount":33,"integrity":"sha512-ZqLA6Dw04Q8PqF38mvvHcIiqIN9egzXKT7+ELeWOZBmpT9wFTQmiO2RGn7CS/CSIvOBhZqtqwefiwhham/BwTA==","signatures":[{"sig":"MEYCIQCTTriWoe2y+2qss5UVk+YuhsqCeSgFY7rrWwfAXb8N6wIhANOtVPGZmQoTnlEGX9otKajlNRq4zqBL8PtgZbae3Y1p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgISzlCRA9TVsSAnZWagAAd9EP/1fWNOoh4gVzwP5eBCM8\nUtB0oE8JPj7/8MrS3KW6I5pg5nOj6YTpRrors78eJwQqO/dipIGDoUvQHaNw\nAGigB35Zw+6uUw2f13/YPagySEUcMUeGlOz1Jt8ei4wBvCzQSWsTmBN3MDx4\nPaXJ3mjbbHgId/FgAYgBQNOcnLSjwCb/hHB9sik82aldKrEnrYjSriVxEVUf\nNL/u/0KQskaaDBXPEHuOsQnjY9ik++wqzeD6FYuZcBR1Gty1UYmobjIvf3HX\nIDK7Xzvz66tOhUip5oZB064YK+xmtJuJjPWZ74rVPeBoPOBUAojuAzfMTQFu\nCp6+dUmW//bvW/bgSoNe94zfWPE5MTAyK3pCmtc0fNhghnAPM+Q2xazduGmv\nLD5peTTwM9v4tAT6JXEAIRjUVd6J103atGHfx4af8wxsgKhH7ixjueqwd6G4\n1sGG50y+NwTEQFKF9jAXECkCv71II3qaZwQDORtLmCyVk/tYh3t80qq28KbK\nYeWXdsaaWlPrVPaQggKjjyd+URUdJjYUZ/bLWMvaLfRowQGJjuj4YuTuCDw7\nXv66brYO8MNFY3WrA4130s1MPSO+hPdOXsuqcHh3d1hnYn1YszYwTv6RBFom\n96N7U9YVsmwoq8xEYa7I0c82TixDe2aa2iRdwZzd0vCoq9/+GoxA9PLLJDU/\nh4nk\r\n=JVjd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.5.0","@fluentui/react-theme":"^0.3.0","@fluentui/set-version":"^8.0.0-beta.1","@fluentui/react-provider":"^0.1.2","@fluentui/react-theme-provider":"^1.0.0-beta.20"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.1"},"peerDependencies":{"react":">=16.8.0 <17.0.0","@types/react":">=16.8.0 <17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.3_1612786916811_0.7515114403991889","host":"s3://npm-registry-packages"}},"0.2.4":{"name":"@fluentui/react-make-styles","version":"0.2.4","license":"MIT","_id":"@fluentui/react-make-styles@0.2.4","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"abb0096fd31566aa142d8b02135a4f732489e086","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.4.tgz","fileCount":33,"integrity":"sha512-11XyDeMwoAzPwqc5xYcX8yJ7OvD4LuLE3WLjUf1cOkg2dsfLO9RY8h/uKHTaZnvPDe8ed+YB0xM93J7SSeJxrw==","signatures":[{"sig":"MEUCIC9jzjzVW6t0JTZyvxjrRmnqwNoCfOGEGVhkEncOm4aeAiEAuzG/HvMlENrX2jibsTI3bBABatbs1LvIlL9bDnfa4Do=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgId19CRA9TVsSAnZWagAACYwP/33MdlbsFfDz2rGUUPr5\n8X42lAY1pywKFAI7XNF7E5Lukt67VfyDbRKNTrnKmnfzBVCELbypHZgAGy4n\nXpLgH9YoBa5y4krrndvcvEL5KcHj7S5154wyh3lV7+vMEcsykL14EitJCsJk\nPhhRsj6BvfjIG5R5Ou26VdGSUqi4sFKKhpNIRcww3RetQuEHFqc3uM5mxlHN\nkZ+/XO6+EDW0gDnxWv94DxKvyHZ3NudVx8JnLHqwkhyY9TmWqtyH3Ling/lx\nQGSIFhbwDG2iK2fGqUWnuki7hFojPBaQtqYdpJx+sG2vdfe7SonudTK0TMAc\nkBQYSbJ3wRQyNSbWwHqFGe6GgVjlryAfLScbD6JqTQmDXhf615zODnDlbHjw\nmh2RH7H4Mtmu8G3sDWvEGFBYbbYR4jsRECUByohDR8bJNYg6YrzWMy8KbRuH\nrwvfU4SZC8WtFTGnnkNaMbab950DhrvcGYLQzVq7/7NadzWmOMM3EJVocQKJ\nBbYW0E8HlrdsxPZecLmiWANL0xwXMiEZvzTN8DH6/PYhv4T2noqnCcikX+wt\n+EpWDsRihh1sc8XbIAVN778A/8B1BqDPc9EinYNiYZWKZCM6bcobjeWbu3+Q\nZZABTd7JILJa4JDhqy1vLzkY1R18mXAmMijQ3880V51l9PSffWv3X+uYVwAs\nMEA3\r\n=BZsr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.5.0","@fluentui/react-theme":"^0.3.1","@fluentui/set-version":"^8.0.0-beta.1","@fluentui/react-provider":"^0.1.3","@fluentui/react-theme-provider":"^1.0.0-beta.21"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.1"},"peerDependencies":{"react":">=16.8.0 <17.0.0","@types/react":">=16.8.0 <17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.4_1612832124751_0.5234570516578205","host":"s3://npm-registry-packages"}},"0.2.5-0":{"name":"@fluentui/react-make-styles","version":"0.2.5-0","license":"MIT","_id":"@fluentui/react-make-styles@0.2.5-0","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"eb337318bb063daf7453c14096e148e8f8b24164","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.5-0.tgz","fileCount":33,"integrity":"sha512-BJi04owKgsaIx54a2Wdp38XMgYrPHb2mtGSQVYO3Eay9PXCctVuNi63DwL4uPf8O+c8UtljzCKvSe4hD1uBb+Q==","signatures":[{"sig":"MEUCIHHFAHzgd3aHGbIZCXiP/iZuSRBU6qYyQn77YRWRR+gHAiEAzblwE43l5Fah4r4W7v/Ee20xD+awvEKktL5j6vSmV3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJIEACRA9TVsSAnZWagAAdbMQAJtPvifUfi8dxqJer7oJ\n/omWREEpyI54sNOHoPRaM7f96IiFMYfQe59sWgG4yvcx+7H6Ubg5qrar5wPw\n5zFAtZ4rup2FVFHhjGtEyI2ddyAl7RbzpVa4/I6gYXQs376OEcNp2YfdmFqH\n2ZxjNqlTtTsyiA0/eQeP+MV2EPbm0b/fkWZ1WnA01lRzFus+I4HdU7PoacRG\nuM3G5d4On8PDF/7cKXDccMm5oU3OLjWN2jz6X8I1H7iwPJgcOYQ+xwCj2wtI\nwgY3HugSbWjW/Y+tbvazMhBCobJ9Rq6OrwXX/IQGJDSUvBVbslOo6b4VQisX\nGxSb8ZMrAUJFp9ZM9bl52ca2wDQ9DE+Bki1u5bATqrJks2hcITuhMxQzasfV\niv/wXBhP+SpJyNKXixDuIRLA1fw+2pCeqJPaWWq0lRLyLtDBGZiXpTRPOVkK\nOFCkDGc9NzBsEwgpw7MgXlda/F+/3y8L4zGIo8wOhPSnlfAHq/HTvYdez+jy\nDHF/gT1M5X8MFBrjzDppkXCnUjUPOiCizBrx+dti8b7D4i+weUZECFKH2jFU\nacfeR6DvjotzNNkwcE2DHDQLkyqMNomVX+d5kyFCfuNSd4CxMtVVM3NsgFA7\n85QozO2qqDzJMmWpDu7jHKL/8IypmcXMZhjFWdOPsAc+TsSr5+fOTHRzgulM\nBKVs\r\n=iwtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.5.0","@fluentui/react-theme":"^0.3.1","@fluentui/set-version":"^8.0.0-beta.1","@fluentui/react-provider":"^0.1.3","@fluentui/react-theme-provider":"^1.0.0-beta.22"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.1"},"peerDependencies":{"react":">=16.8.0 <17.0.0","@types/react":">=16.8.0 <17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.5-0_1613005056521_0.9609304286658298","host":"s3://npm-registry-packages"}},"0.2.5":{"name":"@fluentui/react-make-styles","version":"0.2.5","license":"MIT","_id":"@fluentui/react-make-styles@0.2.5","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"bd2b74ea6b44f4c793e3d2bbb835187d370effb3","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.5.tgz","fileCount":33,"integrity":"sha512-NunnpbCEJ61NDbUVXjojA4BKjRNGf5anl201ROQL6NmobfIMdI+3CT3R1O39ruPw11vqw2+XAdEEplyMFE03Pg==","signatures":[{"sig":"MEQCIB4LoXZVJNpPp8XRmWCbXu1sRDVbGDJfBeqecPTN+36GAiBCtrr7E6iN3OmaBfsbLev0aG5IDXd6NmBtD/S3oh4Wmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJnMhCRA9TVsSAnZWagAAj5sP/RFqExp18NbNoDdd5pNC\ne0t2YDFOZEQeCSKHp2Mf3LcSfZjiZtqYfDf1oqp5wcyM+qYMPkMzCE3HR2TK\nEzW+NR5GnoyUskY9XlJdoLFn4Lsd57Heh4aisnzF9Jz6xT214OWE7FLmxEDe\nzemHelH53e2K6BJo4UV6qSKs+Oh5pFfPmPOiFazEmdjvHhq+IcPThYIbfoKz\nmdfqoVfBz67B+8nKOzLmgpeEy3SMujS9ctFWznYBAg9AI6wV8JT6lPtHccVX\n2gAuxLOf4k/xMltpdEtBS1l7fH/XJa7Ud+KSsKEZjyMfWxWPdcEZhN+OwTcH\nSOxuSqJo7H31JHYb6K0qGqN6qV0Z4jJrKjaDRLiebMONKL1hyXx3EGtQxAKr\n05w4qZmnHMIZd4C7eX/Zk3+KfnKp9PUxnMfz+8hI3IejnVmP1KS8Oly2YcVd\n4yjQZmEPAp1lOsrayNPM8d1JUKYnYya9NK9Ecf6qfJ3d67C8Z1pwjqfcRI2m\nYEOgjLULzvdBCCZJgtR/bndjPmtoq4qmc5a8rMySv//8HcJCNCsZIl+NBPPo\nCLUDD0wrjY9jPyypTOLjLbAGcWekkF4MGqGbddaYK92zXTQkeld7C77cg7//\nkWYLADcrFg+uc4bkGrdGMQQoRVImQVTtaNukG8kueP60iHpb4v6ttRAqRinf\nWFLV\r\n=tOsP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.5.0","@fluentui/react-theme":"^0.3.1","@fluentui/set-version":"^8.0.0-beta.1","@fluentui/react-provider":"^0.1.4","@fluentui/react-theme-provider":"^1.0.0-beta.23"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.1"},"peerDependencies":{"react":">=16.8.0 <17.0.0","@types/react":">=16.8.0 <17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.5_1613132577506_0.49696212954054664","host":"s3://npm-registry-packages"}},"0.2.6":{"name":"@fluentui/react-make-styles","version":"0.2.6","license":"MIT","_id":"@fluentui/react-make-styles@0.2.6","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"0a30f0c6178aa7dfe6bf553d6e523a9effc7138f","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.6.tgz","fileCount":33,"integrity":"sha512-4yqULrJpAkdSrfHrSBMtKIPMWu9jd79wreZ2KIc3+YWzAIsIk+55DTwuvR2KRbY3VZ+qVIxYNU1kV3uMuUzhtw==","signatures":[{"sig":"MEUCIGC72yoQnAEhEQgrC1q9Yxbeg5YsASUkpTBFc2iDqMcXAiEAzkC0tsbuh7KQ4szoQPK58IpeIyYvo6AW/VnyimUF+J8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKmcrCRA9TVsSAnZWagAAf6YQAJTjOHMIMQcVHQq/SfXc\n9iDMjk+zDuz+24QMiE8AOgMTEiTJjU50kwq/Nh7xuQWW9AG6v20YmDhRuqxO\nx9t21zEXHurIN2L+0gjS2DQ3qnbEmFuiO/ZmnWAgcMggMUVh7xbFWyqrkzk2\na9cOTKtfWm9CyiPnwGGBOp0nGyrMwbgNZ6uMZKYssW8EU1eFodSCef3AMGPQ\n3s5AfLEsMU8cOhWyf/lsyq4HkryjBLmvlufaOzHH+LkDp231h0W50xyYfzix\n/qkMus6/9sRssFGr1ysAap9UhtHjlq/uJm9dOkP4pLrMhzo8DDOz34nmUgh4\nu0WzPRxPsTD6TD55roo3wERvqKbnbmjPMgotEk1Ty9cbMHZ5LQL4A8K3D1Tr\nD7dVqBBjMz8YwOxmyb/Cdf/QmvR2Qn31nnPGliH2hfV6kpVmcImoAMJ8TA62\nyfvfMJewuT6RBy8an5y+JiEVqArXKpzf1NvV0x/v270Yak+G5OcPzjLyEvwK\naRw6iID0buEFBM9+pJgBO0AEc+/3RQxdbXuWLX9eXEkMwxLnYuFGU3Tkb+bJ\nXnm1snpnjGgp9xvRsiJU9byPpt0iZ5ICnQdkaWjEM+vR06PZSM0g22FQfC/r\nN8zSzPFpniBDjkUuMnBhR7KnWki0oq4vJ8XUhGgoGcj5DsWU5/g97F/5/2x0\nBoeP\r\n=8npi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.6.0","@fluentui/react-theme":"^0.3.1","@fluentui/set-version":"^8.0.0-beta.1","@fluentui/react-provider":"^0.1.4","@fluentui/react-theme-provider":"^1.0.0-beta.24"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.1"},"peerDependencies":{"react":">=16.8.0 <17.0.0","@types/react":">=16.8.0 <17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.6_1613391658884_0.2377847585207591","host":"s3://npm-registry-packages"}},"0.2.7-0":{"name":"@fluentui/react-make-styles","version":"0.2.7-0","license":"MIT","_id":"@fluentui/react-make-styles@0.2.7-0","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"87ae8c92676c1ccc362ec6a194dce8ca80398a64","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.7-0.tgz","fileCount":33,"integrity":"sha512-XmExajNebeYX50MDaSAdkB2ypnRyrbTS4tUUjZgzhdSYrHAn+onvPh01uhU2UorEXVA9e4TPmWK1w5wD+dP+dg==","signatures":[{"sig":"MEQCIDpqHb3Qx2dQwUDQ21bdgXUKHML5p8GW6GkfuXnXJQ7QAiAZmxBDul66T56zJF16W0KT0MXRDv3hZbio3x2USOlldg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLlzgCRA9TVsSAnZWagAAhxgQAJTikspH0myDKY/irTPH\nJqopvoLz76erNrQnepIh0EBE9ZIsW/soCqAlkqk+V+4fw76tYvqfvUBCtWCk\n9VhcbJrg5mjKu6SHcwShOjWr1h/OcxSEqPtvaeKL5fCBWqxYXWJjn08uspKV\n1C8BPEtwtvxygIUDGi+egdONmy3tD2KxN2eSr3KqUyrFv/YTnFF8qXP0bhTU\nuwwszarqTv/RkFGPsGVDCoDqe09yib66oiQdjgWCAaxliXwV9IyLI7rsGfSd\n2OzTdWrLw/f8WLx9EEh08RPQhtH7nM58Wpu1COY0LfZ2OuH+Z03jwypd+L/p\nc1MHpF4TykOvzQmGHiu9CpnvPb4hMGsU7j3djeRHwLMHWUmhiPrEIeutz299\n0u6nvVhRgG7MyKkKcyMJnIqqW4p+SdZD8D+iijXcmkD7CukguSToGGjhrI54\ne5mokg0axy95azUIYhRmPhYk56RcWme8u+wRjuQI06ZDILaTFvPr2hNVvY6N\nkeXrTWqOtMtGKlfAVkctdpgeNpR/rlgXIvC9CvLVrZhJeAkQ5Ib1esJF/2SZ\nZEPiIIZh8sMq11LukaWcHxQReToQhESjPChJsxxpMaFeoQAZgcTYnEPt2hLt\n/gGMvdvGQRjrtYnKq4BRxkMN+JNuYAU71a/BN6yMLHzkK7lC09TCrHrjgIdA\nwBhD\r\n=NPWp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.6.0","@fluentui/react-theme":"^0.3.1","@fluentui/set-version":"^8.0.0-beta.2","@fluentui/react-provider":"^0.1.5","@fluentui/react-theme-provider":"^1.0.0-beta.25"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.2"},"peerDependencies":{"react":">=16.8.0 <17.0.0","@types/react":">=16.8.0 <17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.7-0_1613651168301_0.803785951051214","host":"s3://npm-registry-packages"}},"0.2.7":{"name":"@fluentui/react-make-styles","version":"0.2.7","license":"MIT","_id":"@fluentui/react-make-styles@0.2.7","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"93125ca27f7ee4bcf35cb17eb5d689c377086529","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.7.tgz","fileCount":33,"integrity":"sha512-u2FZl46MSUuN6Xb5EQ9qoCeTpflzYfJfjLJhBbsm94irYEZkN7Eeoi8oJbrTIemee+9jcQKdCqGmpTaJV3zdWQ==","signatures":[{"sig":"MEYCIQDUuTqWK5Qa0bz/IShK3i/AWNU1ib1RK0ttwJFc4ny67gIhAKGKRpJ1HB6LgaBUHaFBlwDLrCLagWGKf9qST4QIOGkb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsIcCRA9TVsSAnZWagAAgjMP/iMaosVLde07CgdEKhND\nC5yVS+01563LylyUa+RtK7DGLm+cr1jSTnYptmhXxKVA0CqjfqKURh4blX88\nJNWfQkH3YbIjI562cgUwQbohUQrej+kxgfqJYhzDhgUGk4ht/Urh9UTFuUZa\nUd42TiimF23VOV8hVSQAFkFtoBnEU+Nblydt5UjAHa5hBLYrOVWpCeHPnB/l\nLcU28t9uJ9fc/QK7m3YzJoNZ5bEfr7JXyHYGn9q2yVmMIOy9DECN6uw6lj+2\nP6KG+z4Ags6qych5bPGcL0el9XQXrqmqdSL5VaGuQFdU7gdBnuwtjiXnOSKf\nRjLMdtddpBjB+M0Pt0CNDlcb5emDi9caYKXgzq1C2iYu+zGOVqdGgrNALwCh\nEuYFVdV2r19LNmPYduEQgMBp++/fOfY/rZbEjXWrjO2RRlGBvdSi2rfcvf9B\nTtmH5yde4cbGWLnQnMkx+3tKTtH9XzPVoU83fGHP77bBv9i9XHhnrXHlVlBD\no3SSunlJKPzCp3vYeTDSIIQb4o+VLLmxKzU7G7FL572oJ0/mCBaiO7/j2+8X\nD18zOnk0NmU4glbv5MRnXsay8kUaNhhESiETiHpFsEzV1FKeVOYoQxP2astz\n9qjP2rwkluG2pHqpH2nKMkj3ZpBgXxQDFlxx3xKDVEjp/3Fzq1fZzWkHWHWV\nNzRL\r\n=HKt6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.5","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.1","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.6.0","@fluentui/react-theme":"^0.3.2","@fluentui/set-version":"^8.0.0-beta.2","@fluentui/react-provider":"^0.1.6","@fluentui/react-theme-provider":"^1.0.0-beta.26"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.7_1613677083723_0.6391617887375534","host":"s3://npm-registry-packages"}},"0.2.8":{"name":"@fluentui/react-make-styles","version":"0.2.8","license":"MIT","_id":"@fluentui/react-make-styles@0.2.8","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"1a4be959347ace14ceb1fe77f31b6ee7953fb692","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.2.8.tgz","fileCount":33,"integrity":"sha512-UDsfzIcb6C/XXEEPCdcIohr6R3M8qD5lraHGjuJZmBUVx+wUYVv09O4pqKbeYA/wnYbZdjtZkYSIHGTHynJ30Q==","signatures":[{"sig":"MEUCIQD5E4HqQ0+0kItUM5vGw+DZYiwXGUzGtqreUyfT3Qf4lAIgfmvkDqPyTXQwNTNVlKT5K3/yL+qy3yASI22fIcV0uyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM6KaCRA9TVsSAnZWagAAQk8QAI+IQFJuBx3d5pIwC64w\nbnQdVBx/Id8hAKwgTmEPSVwTVKDBeB2kTAL4GEEBQrq0SK2PD/RK9wCv3Ved\n5dGvG0SzOHebacDopyKN37CfHQ0+VKwpIzZ86K3aeEw/qPa3sLLC0mHnnEuN\nU2LuzleWE8jhoov3JabgGPPiDdNyZd6HoFK4aMBD1AMLDckigVfUhmm9bI9l\niHbm4f2Qw357p+DB+lXND/M9y1jWS7US2itBWAB9P6lm1A7ivv8KI+dwgZ5z\n7aTuq3a11+gqXiUzu1G4FyGj0kzo6bAj9dT6rofbeVHSqo5FyznxSUpygrbT\nO9ZEg2diUABI44Wv3NoVhYepuEVxahsIsEZdlOLv+GAz841uIXCka9ImyQac\n4sEtNhKZ3Oo8lcux50zSjzharZuEAVSgqSQa5kLUs4kcua+sztt0iRpKNu5r\nierIF/pDXhY+lSdfbYzFlF72zxDHvMMa4XelkeDsOLSswSiEiJvgrcBbfu70\nqwQuriHftlEGKF10HDENNhIl+xCzobW7ejCgrou0aCDqqSBFjKWTMovjrnTO\nPRag/5i/mj176Jyg56YB1+NuuXGwEaVPlmXCAzsZZgbUMoD6mdVGShmZ3JHw\nw3eynVwVVBr242uilIuuDiyvBVLldyFY19x/z5qDIlAbK0zPFJXP/STaBBLb\nNiaY\r\n=Kbd9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"latest","disallowedChangeTypes":["major"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^0.6.0","@fluentui/react-theme":"^0.3.3","@fluentui/set-version":"^8.0.0-beta.2","@fluentui/react-provider":"^0.2.0","@fluentui/react-theme-provider":"^1.0.0-beta.27"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.2.8_1613996698196_0.2549637702237968","host":"s3://npm-registry-packages"}},"9.0.0-alpha.1":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.1","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.1","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"de6215bd1361060a8b8f994ba75a902dd5c5fbc9","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.1.tgz","fileCount":33,"integrity":"sha512-2ScWFqyBzC7yFQvzgbokxAR98A9VR1/m1HBjozf02Kh06qfL7Zk7Cy3eYzY7zK7gSqQwRwzch/KAwOQFmyWk/g==","signatures":[{"sig":"MEYCIQC83jBZxJyJm2NCKp7YP9+FlX383pyRj4CicFlYkIQHOgIhAPCcIU6RYKMLTpXg1AFJkYSi7tc8nSmsTaq6//Yc1FfA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNZfyCRA9TVsSAnZWagAAUaoP/0qJRJL8zpxs4N6TuNb2\nd9QzsEJYAHKiy8iy0hdSHu9mfX6HgI8RXLpEwj0HYG2QtAt0Bl4w0e1FZCxn\nGhw9anQU7JOmLQZIVrM6UdRAH0EtePMmgFTEQCAwf6pYunQEPBIFwpBy2e/L\niXJAomI1yai1NKIRlvkyr1HLD3EmZY2JisS39ReIAPUIpmB358HEw57FzhLv\ntI3bGc86hoM5Yr2e4z5EXD3V2q8ks4Yw+cPSSvtXYSe2d9eTdhVmMw4Av8g6\nWSQ0eX9OxfwPmNHct2FF9uGyE0Uy4NrKr9H2UCDNKIFduWlX60Blv36C4dHK\nHzHrhagRCmAIiERAzd37EZH8sHby82eYidGQ8dTvDjjAB3mxPi+EFObE3Ov0\nirsjPSoSw5atq84qZ54YKdQYBOfRBvocemGf9KZdnL2wwkh1HGFIwVzczTb+\ngBxxEf5F+707wodXKOSQqNfb1vOcBUSPr5hXAhoG6W30Hu7aZdlO9GsjeWEf\n1rvd5Ny10w8Cm9QJHh5lRE9wpWJKC4UOtNWpuExUoZKWEOVIK8sXp/wHqA8i\ndWKgXlB1400Tx6ZPV4VSTsCsl+hFl8bjI7HRmc0I5re0h4otdaUBi7VoZ18B\nq32HkNE8U/40H68gO4HJYlG9Vi4XeinA0WHdC90SoHZHV8izUYoiferZdJlP\n2HnS\r\n=vwO7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.1","@fluentui/react-theme":"^9.0.0-alpha.1","@fluentui/set-version":"^8.0.0-beta.2","@fluentui/react-provider":"^9.0.0-alpha.1","@fluentui/react-theme-provider":"^9.0.0-alpha.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.1_1614125042602_0.10280073521736255","host":"s3://npm-registry-packages"}},"9.0.0-alpha.2":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.2","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.2","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"9985a120bfd699673cd5f5f890ba85065d7b66c4","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.2.tgz","fileCount":51,"integrity":"sha512-ZzY329Ct79sfnmofhMiwJD9OdSit1++8k4loNJwepqxWBiVzZuddMiTiyLRHJaIPa7U8Tute/KlPeX+L0elhZA==","signatures":[{"sig":"MEUCIQDmw2f1a1YdA1dEapEsyuwCTimjbGnD6/M9rvKs0INpWgIgGJdD1MrT0+w2rgsQC6C/KOQpzC2D6h6wzQP607TDt9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNvmwCRA9TVsSAnZWagAAAegP/RB29Bq/Xwbpk1h3XrBv\n3C/4TceGpW06hY08087w6zkoiuNDv2r39IXZHx8Cs0m1aCycM8HlwP0aNcUA\nJ0OFwOuyx9tsi0GzepBeAqhfuWShOnbw6/luS1OqXvVXhNW8aFdOtw0tEE4/\nvxex1efeK0uaedtA/1Uf8zgi/O1g5o+ybr8jF+EZ8ViiTx9kCC3GkDmWsdQO\nZC+J3sMIbNKJmwZ/hO9xddHVwGISMXID2VWyZOpKZPsqdnaldp+uC2w++sbR\nlg1L17oASkgCpHB0TExwUVDOU8EcZTjfqLD4dtGc34e0Ff3ViHKEfTF5slHT\nwR4Ejl2oEfex7Vmg6G+RYiTrv8wX0xa0PYqQATrGTBQm3Cu4QhgtWo3iJr/e\nZiB95a2X7d8pARm8Nku83FDDRyb1RoFvZitEonqx9o7HJ1QlN+/0SkSaYM/I\nO6OlD+uJ+IJcNJUfC0liIA5v1jCRWx9/OIKy0VjhbRqUcQr4gRuGuL2Nn21v\nJ7OPEbuZFwM72kKFZ9p+J4ruCfiNJjtASjCJXGL9MHEGEsUMbaWrRLtd7oRk\n3DYvCbywptDicHMJ/HrhTCorrz4zWvyugzn9rK1TeCYFhBRTAv5bO3z2riMj\nZdic9FvwSgQFhR8eqKcD/gCvOcFOPkG7DJ5uD/bgj6HlrhHWQGPkidT3RSEe\nn6qn\r\n=nyyB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.1","@fluentui/react-theme":"^9.0.0-alpha.1","@fluentui/set-version":"^8.0.0-beta.2","@fluentui/react-provider":"^9.0.0-alpha.2","@fluentui/react-theme-provider":"^9.0.0-alpha.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.2_1614215600188_0.25042119743148605","host":"s3://npm-registry-packages"}},"9.0.0-alpha.3":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.3","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.3","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3f8e87567873e631721252e49533f11ed2097243","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.3.tgz","fileCount":51,"integrity":"sha512-T/f8XB3D6fVa5Qiv11lfLUVseYF7NxGV3QQvRXH6MEvxcmCX4yGLUzXJM+LnnIUuQ9TGA7UOn6G/+1xdYUXR3w==","signatures":[{"sig":"MEYCIQCJIxnS0F1VpV624L1qoTtPkLvAkkc6nSyAIgd1BTs1OAIhAMqMst13GEuK45v+FTY/+NqENytsLEjR376AJLEydodv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOAU3CRA9TVsSAnZWagAAqzAP/i12FLc8NVX+78/3fr3x\nj19C6SqWY+wEn5DqTETNQVmVVLVijYIMJDf8kPh/CIAxREVwb0qlE6aoZxGE\nsPXgx1wA6pZwwKNesurDYi4/gvg3GjHu3kBwlP8l+btRJaqC7UhuTZsGxXnt\nzyjrJwHY0hCdrDcHT3qvQPw8CEdqn1HUjMfiFzNPYlmV68cOa+bAM8GXXcwl\nDGi0b25b5rXw4x+psvS/5857lMwSENt/MO5Hn7Zp47dQ/j0qhfKf97djZMyd\nX8osXTSRhaW2tu8qdfb4chuLhs8srx1aUpdQChnAYU+B4nbFNEEn4cNY9+WM\nE9CBmR8+QV7Le/TEwYYmw1Lq/GxsFC2B5NBA5ulrdgIV/sWLsIbOyzPIuXsb\n74RDDnCkoWB6N27PJFEhT0ZdV2Kf1eJthJje5MZHgSeLBhzmlFHSFyxtaQD9\nw3p7repOp4i9mWuqhZNlcWEXtqIYXOpEiKA+PQJ1GgQOdiVxv1qx51OL9uWg\nXeljUZxuyLmlhx92tPVCvVpYRt19EUpDPP7HEYv6BHxk2YW1P1Xinmf0jP4Z\nCEwAT+GpHYH130CT7XJdEX8BjFs935Fi2AEEi22TgCFHhlOIYf1laiP+89y1\ngmDnT389Qosea3y75hVT0JrLctmbZDF9kd2CV6sM4AmobAcaQ1mG4q99khEm\nqxcd\r\n=vklq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.1","@fluentui/react-theme":"^9.0.0-alpha.2","@fluentui/set-version":"^8.0.0-beta.2","@fluentui/react-provider":"^9.0.0-alpha.3","@fluentui/react-theme-provider":"^9.0.0-alpha.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.0-beta.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.3_1614284087026_0.040058632721218235","host":"s3://npm-registry-packages"}},"9.0.0-alpha.4":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.4","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.4","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"0ee31211e4276858e80dd5539d38e19f9d136a17","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.4.tgz","fileCount":51,"integrity":"sha512-RqZf8UsoZGVvPbcMQwIa7pz6uklwwNrbwqFJZsmxP9DC1P22ibaPzFFCSRKNYGdlGIu0CtE77frbUHJuZV6JkA==","signatures":[{"sig":"MEQCIDXgnk5+Wujhq7WIpKL2iMxBrFaJRKvsutizWCJ1uYEeAiBna0BCavgR5optaCV57MLGn4XujxZz8Cq1KAFwgZ+kjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOEuDCRA9TVsSAnZWagAA9dIP/jnAsxFFfOPCUHdIgo/i\n3hQhEX/w+0FHujvy7sQbaThrQYVcC9WuGbK4+VCdIdeqYIr9lJU30pTTBtrY\nQEW3bN0IsLRx+BNWHNy8r1wPz+HyXjdar6J+VBG6JJu2K/ZC3DkAMAs1bNUL\nWOZ7318YGuHECo7YWjsdQpG+PPLU4vrshZIkxR15Wvywowa2HVTTuM3SpLvO\nnLwPcQGm08n524uCddzNFz/n57zf74dQqzhDB1npxw3bX9HuLUXFOW7PxQyL\nmo8E78saIz7Xvje5P9rPE4OVis0wZXeZZiAMwoDHoUTDFxylBdLyWqzzyLZV\nhp/ZKixrFj9LhFJlQRhcSsAYUq1WcWxgduDm64PyuGtmQdMyhdAjWLYXeewW\nfN59FpWkzBAtu4gT8eFf+COwNYZLRqqKA0f0Mce1WEoiZ7WKYugakLemkeDK\nmPKXpL0OLUIkMOQ5zEWOvY89HjzBzu8TA8hmHbGYvHxiDy1ghz6A+Z7UhGoV\ndLPDnDbf4U9mxhVPO9pJILA2i8U676cAmWqD09oVuTpDCJyARlKUzlIYUIdH\nC0WLYzLm77oU5vAprMih+GMnX7o1LUDwgIVehqp1v4QB4AcU7M2N/gwlKt/t\nm3KsNkU4rejLemxyKrLaqIks7w8qTDUBT5BSICRrq+Fk30ngqWilqDW9icej\ne0Lg\r\n=Fuu2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.2","@fluentui/react-theme":"^9.0.0-alpha.3","@fluentui/set-version":"^8.0.1","@fluentui/react-provider":"^9.0.0-alpha.4","@fluentui/react-theme-provider":"^9.0.0-alpha.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.4_1614302083195_0.7032978446023044","host":"s3://npm-registry-packages"}},"9.0.0-alpha.5":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.5","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.5","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"89e62cda332cdb38f7eb06f17c7b1c9ea7495492","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.5.tgz","fileCount":51,"integrity":"sha512-O7mt+iaIhbOD/foCVurQseFe9NEistdG/Jmjfyu4sz731nrD70X3/5kR0Eicq3A/l9HtHgWaq7+aZDmGIF6jaA==","signatures":[{"sig":"MEQCIAUnUjCvhF/ufl7x/qt1jIQcoQyNyjh2GAFd6jrSYnj5AiAAr2Oh3ZK+y0Ok5Ep6wxuhN6hWyf0Rak+ZLlOz7584dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPeftCRA9TVsSAnZWagAAFpIP/iqOIaVzne2WXYWrqgZV\n25Qx0wCxZ2eHyh+YHDIgde2nn69c355e/WQ63hOqjsqqdHqrhZbivcVSzUJq\nadN82gc11L+tEkCz+loxTdTVkUoiS9xHJgd4tkRlCxn2oNKZNzo1/QPYMJIg\noIh9cJQebMQDkEQFM4u5RB9yxHqr9zpoAeBwQOXIhpduSiwoQ6RlkebSN870\nthwqjiXIppyuMvzWvKNr6fzPV3/9viBzZVR4Oj/Elncsq9HtQIqBFKmaVxoF\na/AN7noEIhSsMtItbMadJU8qq/zb3DaxIh1COsBM4v+NxJY7WOs03OCWDBf6\nmelgeeD3ivDKz+9T8db2ItBPkSzeJOxLZWiYITy6pnrLi/Ffib/iPkv/8BCj\nhvNqIkkBIDYtte2RmF868iOIHxI4jE5NPiHyVf9xc+SBU5oaU4iDsLRJ3BeH\nqTZJKhMO+tr5T4lr6rUV0OWp760v6hF5xlluG/SmomKAu3IXtjW4vhGG+TF/\np2L5OfSO74hRmnhbDcjRBumaNdNXQjqma1znt9E0FuL2+Q89RIP0fN1jOCUA\n6HS31aRDsDdPdyhLzPicUmFauupMvcIVORRY6IWBqKJH68DJnBE4kDJJI24D\n3xRLkwsKOGiHoyN30oP0tyGmmlNpsZCsVwvFUCKYRQlPEnfkiW+b6wKYlRSC\n+NEM\r\n=W1NX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.2","@fluentui/react-theme":"^9.0.0-alpha.4","@fluentui/set-version":"^8.0.1","@fluentui/react-provider":"^9.0.0-alpha.5","@fluentui/react-theme-provider":"^9.0.0-alpha.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.5_1614669804445_0.05766712189639778","host":"s3://npm-registry-packages"}},"9.0.0-alpha.6":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.6","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.6","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"34934732edfd36fd264bb0e33eec0be555d684c7","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.6.tgz","fileCount":42,"integrity":"sha512-ma7poxwBHvc+NHRWGSOduiNSSYbBGEcxu29cNujI3EATIT/0MpvhGsLaTfdzFwV89CYNw/m4Lf8DLbQfdaJ5GA==","signatures":[{"sig":"MEQCICwdyQez0pFe7tlNMZCNd81HvhS9UGN3dfedXZA83fQDAiAaBi186FjgKEAKZrArGLyfz91Nj0QP9RjRkgsQ2PkfSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtNrCRA9TVsSAnZWagAAZUgP+wYFpA4bOrOcIvRk5Qij\nDohL3V/YzyGgr5u/rX8OrOGKYIP0B9YOXW6+YSesVextnX4jjeq6t26pTZUZ\nsvUtAwd4HBR5IAwb8av3C1GX/QYBN4RRovx/KTDGApnEFFZKN9gGi1JfjrCP\nBr7lMfMadU3msj1gwNgPI5NIkTvIKLzZ1ld57BdLqt1mE4tibqptLnFtn6q+\n/dH+HlsPwNWiyCBzTKwA4H4XX5fFLLN/KD0VfXHWA83ZjhOGhFQP2w2aTIyN\nivcjDNfx3wMj3TMAkVnuCoSxMPLMIgfLbqqiIBC8a1KCJUGlVZFpwtKwRUwv\nTFdV79GWI190wGGEDSh5RNnGMCqPTIB3WRNby/RRzUkxClsasrUSCPU6TYTN\np9vEIM4p5Qz1Fk5KZii6/c96OjpbtyQF4jUMzYqZdtPJNW4E5uWGLkFOlCoe\nG22j+8AOoyGH4b2P3JoPa2+HanLmq2TdahIwC5igeolSI6SWM3q7rOYvnGhN\nL8LCQVRJh/7H30H8RS6LOgoDXqV2Y/L9aP8811TIa+H6sXL8p+Q2z2H8PNgD\ndlFV0mTV7tVSvd7wFN/KK1mi0t5rtkeC8qGS5bzhQbHzqtYQ2vYi21u/Eg7f\nDqE+aYdNzykr9vO8cmKyK+dMYwLT1nkAC1Sz4CFUQOHAA/6KAI8TnW50sY0X\n1Lik\r\n=AcJl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.3","@fluentui/react-theme":"^9.0.0-alpha.5","@fluentui/react-provider":"^9.0.0-alpha.6","@fluentui/react-theme-provider":"^9.0.0-alpha.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.6_1614730091087_0.44224264316776685","host":"s3://npm-registry-packages"}},"9.0.0-alpha.7":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.7","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.7","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3dca8296d9f5f27b22994742c73b3147b6774541","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.7.tgz","fileCount":42,"integrity":"sha512-m55owOnO5R7dlHMzkWizX0dhCLVS1mghWJccc3R9XR4dP8PmcztZawMbKZRLgVrlyhAhOj9IzYV4EI7y83c2bA==","signatures":[{"sig":"MEUCIQDF29RIUPV8/noVxPF9HwZHPsxY490Aru/bU3g2oIbzrQIgZN022H1kH8s87f//SHFQUy68J3uWAOcuvsi/Uls/hv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQpTTCRA9TVsSAnZWagAACuIP/1r6GgPYZSMRYl0pzqd+\nVgjKBjzx3F2bXvH267B2ckKW1LL+MZ0Vsh+J7691esDenGbE49ksisF5/HDD\nJ6Wr6QrV3od687tLwg9/el2ybsD0g8vEktah3E6wFgcg/zQAy1UU9obFWJVC\ntrMKXUwlmwjRYpvxekho2nKfvWXVB1RdLpYcJ4F4IH1gNhULVvSZumY8S0xh\naeud4UfUJ7dsE5yorWgo/fxs5h2cia33iNuNpg1cttfKR6+Re4XG0t5u3AfD\nWs6ZtD8w/pJ+QuLl8YrcrR7j+9i3Vfua6U67SQNjFS9IzfdspjGCdpA/BrLp\n18zKt9e/8/+aOPX/+v+YWIgatsWLRZicJW7r5PHy21CGQRqWrkBfvup/zrK2\nMB9C1rrPRX6aFLDudC5cb0uLu/oskh83HFPYUXeYEaRc2NlNjHP8P4N3yDFD\nGzBANZBxzWTyOVOp6HfJgdWWRWdxRexjuFluBaBNEd6bqgJssxuC9ZWXKL0q\nmCcvsGJDnKa3WPXajAp5lzWcXu0xn2U8O06Y/3CyStKU1GROgklrm2vLRJML\nSorMY0gglWnEXYBDXTdbApHzaVr13w3b/b+s6WccEWGiCZb8SARmDXIlkDMX\nDT37diP95YaAyZkKxltmY6CqGrLO4RIpOa89ZzBS2jjB1VZ+m6r0mCEh4o2I\n19U9\r\n=3lPQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.5","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.1","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.3","@fluentui/react-theme":"^9.0.0-alpha.5","@fluentui/react-provider":"^9.0.0-alpha.7","@fluentui/react-theme-provider":"^9.0.0-alpha.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.7_1614976211131_0.5377152451286313","host":"s3://npm-registry-packages"}},"9.0.0-alpha.8":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.8","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.8","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"f94596c3f939495c82302304af80df63a2069b1f","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.8.tgz","fileCount":42,"integrity":"sha512-LcOfIgMI69ESosin8Zq5NBDbuLEZzGRGDHbf4n6xBoiVq/80G0p/OmC7vQNBU/HRIhgbu9LwII9OozxoO0b7WQ==","signatures":[{"sig":"MEUCIQCN5SJQA2He6BN50zgziRfZf/01Q9UgYJMw4cGDa8+yxwIgGrcO5FZUA6UlQelrUM60RDyBO9y8vp5UsZu8KPvALA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSHZKCRA9TVsSAnZWagAASEsP/RLXbkbU8hGPsFp+Rrer\nizv493HTtOlRlKno2cyrz0QiaXXjNKiwaAg5hcIme+vHR86Qp/THT3VQ3Pbm\niB5ZoZIXMwXAsv4uTgzyusbLYyonTs+q/eWreR1EQYa+G5DXK1km54hn37Zl\nQYnYRCOzyVrfXtjnO02FHvdlir/PAu7jLp2hpX8X/7liB+wvVpn+0N/YR8V8\ngOhaJkbySHCfe1wPAtDraUJ1XAmjE6pA/In+0QMdil0Z4+YFImJK9qT69CkT\n0i1l3QcLKAoOgIuksHQlv52kHImDTeI42y7M7D9lp28Q4beSjsjCGw6wPzPu\nhTFaBDd/blYxi95N4nXJ3HRpgrhMi0ouizb6mOav6xCGLW+7mx8cqarM9nV/\nR0kir9wk4vB2c/KO2cRDEwumtZNUNR0kuZk46yEaaK7Zld6rQGXJ+CtqBq0W\nDYcnjEWFssUc7RLkrX6XdrVZkTTaAEb0e39u5Sd8TGbUHThVqMMaoQIKyQKG\nrakVdOpsIWW8NhjPDjpFyz0/ay2uKdfxztjkdYlscl4w9CiPK3cdKERN1mMf\nFHy0zDj22a0E9TmQfkX1SqWpNxhv0IOKtzf8DzqPFLljj9fMi5p2sS/fp2mb\n7VwE+nH6jcdjG3j3oSAI3Nw/yashtFFFkspohY+eJYzyCilXG87wcvckXpY3\nu+Ar\r\n=zpIm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.3","@fluentui/react-theme":"^9.0.0-alpha.5","@fluentui/react-provider":"^9.0.0-alpha.8","@fluentui/react-theme-provider":"^9.0.0-alpha.8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@types/webpack-env":"1.16.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.8_1615361610406_0.8507363929440162","host":"s3://npm-registry-packages"}},"9.0.0-alpha.9":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.9","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.9","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"06242902cba26da7d5af411916f96606c222fcdd","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.9.tgz","fileCount":51,"integrity":"sha512-nPHpDARW5qofBIns+/ScLnZDqrjWZ1EwQpkma5dBcusHjMU5SJfIhZp4Fw01MTaSk3XOv0egAWDYvtfCRcs1LA==","signatures":[{"sig":"MEUCIH7nh06P1UCbisZA3te59YvfuqJsGFDRj8hZwbKVO0CuAiEA9YZu49OwPHNF7vWOW16Jzjt3rKzESMjz4FIuZW0wsXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS8jCCRA9TVsSAnZWagAADQcQAIUqE72QiFHvHJu/Loig\nEEdXVkzkQD/mUbPxdIqCX6sjRDK+vi7Rp+OfyWSDh8hBfAq+L2aVHk1wIujw\nX+7f2NiCnXUL+9QCtcabMRTioaoG2JqlPNWhozfl6lCiMeh/i3iYE7ezYyg2\nRC+amPBohkcMR0tg+EBfl3gOuN2dFtiGhGf3ZlRSSmpIkEEWCHN7VBjvEfqp\n8bxOK5JxgkJcZ8sAmJR7hUU9UzN66il2MemcOPNZOwcJ3HVabmLB5xTWMHd4\nvt9o+tZWjZY4CbEEN4DW0dfTnpd588uy9KmXGxpws+WKzdCFF/1sulKhERBD\neEydP7xK5qADFfm4DgXB/9/yYNEBtg7XBbNxFadYmTZpvGluGrUrqqFeIoBe\nBlrszpZ4WiL1sGZP6JNCkKlJ1CbZ3c6tay7fYvpuASi2esdxTw7lZqxnwBWM\nBooI9f1h2j7pR3BQoRk4jxXpZDFp1h0+Xkp7gam8mObsmd89eTzJZLYgnoBP\n6tKEz7HoztDadP1PmVAoxNZpiDJKyBrvd5VpFqIEj1VcLbYtD0l6Vq+QM+8b\nQuOYZWEwrWfA+m7Y1n2Darl6wCVvZUhSjb+cSg/vSHyZlb2q2vQ/hJvUn8OP\nqyZlmhfZESUSbX05voCj69jfx+VFhWcNDrwWMn8IE9/xYgwGkJT3JiyqTfQd\nn0FG\r\n=/8wv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","bundle":"just-scripts bundle","code-style":"just-scripts code-style","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.4","@fluentui/react-theme":"^9.0.0-alpha.5","@fluentui/react-provider":"^9.0.0-alpha.9","@fluentui/react-theme-provider":"^9.0.0-alpha.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.9_1615579330259_0.31896638960071444","host":"s3://npm-registry-packages"}},"9.0.0-alpha.10":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.10","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.10","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"ac5a8abcd546f9608c537dda498b93899e87efec","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.10.tgz","fileCount":51,"integrity":"sha512-K/9eXLBMVjnfqXyM+K0BwkTiiq/KEa2SLJiQWu85UGrK6Et3eEy/Gdniy2U4S6RcKfeAk/NwCjSE5HPnVdAl7w==","signatures":[{"sig":"MEYCIQC9800FbbQGS94AdENENWP095xu8LT6xYJW4kUGeXKkBgIhAMn+NToy+s5exW5nTFrCnL+nF9a5Utw6rrbAf09wu09W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTw4qCRA9TVsSAnZWagAARAAP/2ezFcu+FNUA+Y3P0nde\nG8taMAHtqU4gZUnlCz8Fi5QoteGZDARlwRxUeyT9y8AXJ1DqiJnsAOcIopAY\ntIH/MOtdWrwsK0vsl6zAT3McfyPf4bgr1u09kU5Qu/3cvqMg2EtJr7FUesit\nsOFlageauVpcF/c7zPtIRcW5kvufFeE5mEF23FXemrb5usa66dsZZp4a4xhE\nnkKn1EBChqMJOo/wiETE+CSswxy1PS70kL0GFpkLywxFkOY3dCvtveNhBlIZ\nf67/Ict6s5xdfrBE3Uu3FaAMU4WgpsScV+CCz9Qw2I375Hnn4kFoGTrxRvAf\nL0+ZpG3Usq59LMBSWpWWih4vFoGCq/vsdzsH+aXPYIRvZkldABNTc5xhcK29\niPl0hPewAXxjGkmn8BUTPZ/UJCbADqLsxmxBhJnEaR97jn+99uGgZL8Q6NDS\naGzCff4OJj6Vc61Rr/72gPZwqOBtiZiM2508xzZe3WVHfZW4NLCpv27yiEV2\nbpqjfz+op9cr7DmnU4yOZSJ2hA52T26yXzBOwKijIjY+7BiPmCDY7Yh036ts\ntQdwSQK2tq/qLC6SzwR0EXI+mrgwXORqmYx+3mdUWoiAwEUJvOLXggYt5IsP\n4HanIDdv7KofEtWRzW7Cm/OHU73XedKGsA2LWNkhxs6djL98Q6BbrcwOZs8B\nBI9C\r\n=kaRl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.5","@fluentui/react-theme":"^9.0.0-alpha.6","@fluentui/react-provider":"^9.0.0-alpha.10","@fluentui/react-theme-provider":"^9.0.0-alpha.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.10_1615793705583_0.376956602137007","host":"s3://npm-registry-packages"}},"9.0.0-alpha.11":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.11","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.11","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"7b685611d00d380ffddc572e8352a68f5e28dd93","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.11.tgz","fileCount":51,"integrity":"sha512-aMsbEqENvvIe0BwvfQnZvTfzIhKGDyRpml2VB4x/iTOiZ9hDzfM2D/v5dJKFMMDeKRT+xNuLuljdqHdKOjJJ5w==","signatures":[{"sig":"MEUCIQDBiCpi4zw5buyH35Xd51U0/o6BiPdpUQt40Wv2Lg8OUQIgT1LNp0+3N5byaL+RAVLgOZDY8NZ3viu18ZcRPC1j8n4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUF6ICRA9TVsSAnZWagAAn9wP/0crVC3SLnQ5EDd01bSf\nAkqy9seGVknHzazfHsIFvA0PtYvHOy/mrN4czzJmlgJym47/Cd9lkJoSnLfG\nOjCK11qp5KpemFEC3HkuHJC3InfqJkdJQxzF5orO/gmf6bVW/2HbbNk9eOfV\ncdAP40Sq4W72Sr0wFXKaJ1GQJ9ilLs/1a92UyUqEUOXRDU8llBwIFwGJnJcC\n7O3QTlkRXm404fnqn8NHSD1O1b8mAzMp96TdYvnrrixoiXOJLABG1cJcU4/l\nscNdwHSu77ti1CjQsRpho4stfREwdiYtCRsd+gK0n2gUGeQpRlShJEM8L4yZ\nxBWG89vgUY/2QcXHkLTuoAuTouBtgxc0a8lQerVm1g4rV0OK8n6se8MK3LLx\nllHWA3vuhavP+NIk412foMWWNe0NAUOniacjhvTk/+Gii4tA1UBBWCD1ik2V\nNhW3sEwj/woeKbJz7/kpmQ4RDaYHP6cGTrsjVZS73OLMNfdaJ1eBIeseKzHp\n4klxNN5VGx9B48nfud8BFQitBDWsMQoJ+Bmu4qugeBh/WaWIYJT1RjAX4XmB\nM6iESgulypK4zedatqEci8HsvRSa1bz4vsN6IByyFis8LT8rz3JPB3orIEc4\nm3WVebT8im6C8yVHhD4kQ1qsXaAR0OH9qBNX2QjdRMXPPQ7/XyMnkildcbHU\nnIrw\r\n=iQmt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.5","@fluentui/react-theme":"^9.0.0-alpha.6","@fluentui/react-provider":"^9.0.0-alpha.11","@fluentui/react-theme-provider":"^9.0.0-alpha.11"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.11_1615879815894_0.795823878717532","host":"s3://npm-registry-packages"}},"9.0.0-alpha.12":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.12","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.12","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"096e34b8123af3e13a5a731a3e4bef78922fc4a7","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.12.tgz","fileCount":52,"integrity":"sha512-sL6Eg31u/koMr4cpV9Wwg6FuibtVnTT4Htp+0iMYAFm/xZy/1HbksfRX5+3eHclH9MpGV8pdr404LmF+wZPbKg==","signatures":[{"sig":"MEQCIGqf8vf7w8f+ZvkSmmdvlSsYCoBWRZSyPAtSEEj0AxFQAiAoNXh7Tml+V88Mr7lnkW74PXvr61bmowjtrQBU+UBSng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU7RUCRA9TVsSAnZWagAAgF0P/Rfq4Nj46aKIBfM7WRHB\n5fmNhOSXtcBkkenf4BxJ36lAu8zoqivm6IfmJ7L4MnBC7dqLKodvGZAR0UYs\n5BrsZ7zDn6CAzDWx/zX8AoVf9JBZwYPhbMVi+UAZ9XEhqyuBGoBnOd0bo1xU\nuzBg26Ve5DPI/GN+tDRISuY3ljduU9BK3k6F58UOSpDRNQTV4oTkK1gyFXBr\ntNRG6p42p/wzN5luyR9I/cgv5N2hNu0klw1kRAWZSubQdQDrhRbg51sDCK0s\n53UyXJDmnzEvkLj39gf20uGG+71TzEEy5nKqFsJCveVKURV8XkNMzvMGcOWU\nNaVuBZLTbXWlvHMOC1Zou8YH34Z1QiNxGpTEnAiOWlbwVckZKJYrYATTtipM\nu5d25xLuid3ILOLWMo/abE0o24A1XYTBmpZBa19NGn/B8YhyDKjJFwFZwqBJ\nwJ0I2zWtCY90X623fdfxrVPmdz+6SY16Mvi9oSpKscbP9o3DScDaz9BEkidP\ngUtjqbd9smmMrBnB3UfbjHSRLjMdKwRonos0NW2bQbm5aWu/FrFrQOWnCz6H\nMV5dbTCSXRk/LEtKQLzEaw6Siwq2uFUQl0SzNYYkYoQ8+cRDI0SOj7vtF7Rc\nV4ecl4heClnBpwaLBMRSzIENkgsI//7GtSckhOG3koL900fVaHtW6HReR/qJ\nLtnC\r\n=cspJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.5","@fluentui/react-theme":"^9.0.0-alpha.6","@fluentui/react-provider":"^9.0.0-alpha.12","@fluentui/react-theme-provider":"^9.0.0-alpha.12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.12_1616098387708_0.1893824866145417","host":"s3://npm-registry-packages"}},"9.0.0-alpha.13":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.13","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.13","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"7c63cb6346d8c74ab42078a6c340781826cfe812","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.13.tgz","fileCount":52,"integrity":"sha512-Byc6Z8Vix1yjlOfkct0iOvEpdDfZHZBENLuiSzt4hTV95hySjN/GLFyn+/SZZay4ZMnC5V9zt2lN6URWCsibmw==","signatures":[{"sig":"MEQCIBnYjrT9JubWr6NOVGeEPSYUPhDMcNrJhUxsNuR2zFmcAiApe1xwPJfIp5Hww7G+fIb9jdrZQ2Q2Widkq32VtoztqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":69209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWZjmCRA9TVsSAnZWagAAYJ0QAJX3k95rQiaRig//85Zv\nHezfcofE9YhvrmL/5TfRzuApeuio7On4RCzWZEGWOFPougufd46fRLBCahRL\n5nGA+IgdIOVe1E9KPGRUwMXhNntG0047a5V7O1dWXIOHWEqPNRbQlDyO0Usu\n2SPLVvZtnA+VKylo3i4pegmklJP6NGrnnfP+PcSY6uS2B5orVlgNlfS6dBbY\nw6hirhVIB76d6jPFrD/XM5agpSgrVsmxsf7hbKr7qsvyhhcAr+g3fnfIRUU6\nantoaO5vyTyXYGZHJ+dzvZ+TLLEI2shfeI3L/3RxxZDfvF3oexT3yi6VafR0\nlTCFlYC+oB46ZtxTZnotkkc5X7f4cy6joCVt+aJ+Whu/KLLN01OGR0rViWN2\n9UTtVPhurkDvXEZbrMzlld2wm5Yu3KpCj1u8l4l5dflrNfi8uGRFo+OaPZb6\neMD89JtssIb/OabecVKndiHoBk4HIKjBKPqrLRXT/ldTuyf34/REKDxzilA1\nC6EVdbzVY8hskKCnFMLnkIZ0fKmDNiDyyESm+M9spRVuhXGuH1+lbCOwg2Fd\n8FvejzR8OaO8ia2burtlnX6b3XS3qEDmGv+rbDXMqOi8L3XUK/zLSgVVfU/l\nRRPLceCER9tV2Wq5vJmsxRSpXmMVRh8j7JV3alU29FEm6wqGtDTiBZ/TRmaq\nGZ1r\r\n=6sFo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.5","@fluentui/react-theme":"^9.0.0-alpha.6","@fluentui/react-provider":"^9.0.0-alpha.13","@fluentui/react-theme-provider":"^9.0.0-alpha.13"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.13_1616484581950_0.116426163903528","host":"s3://npm-registry-packages"}},"9.0.0-alpha.14":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.14","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.14","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"5cfbcda0036d623aacdd48047a55cf5c94936f62","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.14.tgz","fileCount":43,"integrity":"sha512-mmF+5YFL1PubWtToMIfjsLHdpyuqkLdIxDk4YYJSsLo3me96bH5d9UNayl98yk/0nMuKd7J/xEGgFMRosD4vQg==","signatures":[{"sig":"MEUCIQCxY2+CVGey+eF+uDayiskNCi4WTfYy63W/QBO9LxbMWgIgSzhJ0qmD/+UdNJijGiy+wxdICCI040IRHe8nX+tV/N0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXDwPCRA9TVsSAnZWagAAaJ0QAJor2NqIitK6p6W/Rlur\nMcFd6TOXk+tlnakvUKs0+uwfRTCglRPAMuzge/y511rL9H2mDe7e6m7/KAo8\nlqoU3Sz0EdK5z4c3RSBOwshR9Topw6chOs1O9hhm4Y9q9tFIJ2AJKVuOOq7X\nbombGdD2baN3x1OWqeqX91OXIPxYeh0POlxbfRBmY5aId8H10fWr3TM4RYzP\nSy9UZERrt1EWgjF1Nufl/Bn8v7222oIt3b4Id6soCSEfJfIyEv+rS8TmtjdE\nruvtaHGrKwDQ7Jg7uznlbz1mWhcLQu60bi5qhq6tF0U+tq96UW65rdfDnLxZ\nh23lD/y5bBEDkPJqNQrq2JCMCLTS/q2fNhBeONYe8/QZFcmXonOPNDmKduPC\nntODxZZFLOVHTJ3VHATGcHXiBOIpXE/dLvQwqEKABFbtvJVrynCVzp0hK6h9\n56yF7FseThcCtDvtkqZ46FP5oPs/D3JCzT/mJg2nl9dgffmMuyivEzN9nFDW\nHMpUYXM3X3avnuX+IBj28Eto+mjoTJuKtQfGDoNa1iQR3B9biTxGg5NmS8M1\nc/yK/e6hobTARTLRve5jzreXw290wj8rPy7hF2A9tokckY2P8c9/T90/DlwP\nJTsL+ARvStMD1mMPIwCzCjLtnDVqYi7/gqfj0fC98oa7xoV+0zT31hJYHYEb\nF5qL\r\n=r6jA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.6","@fluentui/react-theme":"^9.0.0-alpha.6","@fluentui/react-provider":"^9.0.0-alpha.14","@fluentui/react-theme-provider":"^9.0.0-alpha.14"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.14_1616657423494_0.48376058207388484","host":"s3://npm-registry-packages"}},"9.0.0-alpha.15":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.15","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.15","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"37f531c18378b2142f219da2f47b9b09843cd779","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.15.tgz","fileCount":43,"integrity":"sha512-xjZMpzUI5+Ve55a7KeVeV92pu0CvK/+uZRPuA2tcwJ4R7Iy3KHcN1dFWNTOt+xJFKIULMWz624faksbJWK7E+A==","signatures":[{"sig":"MEUCIEQXuq20bVmiuLGs5fXnjr5LmgxJSUSd9wHlGGSBSI69AiEArNYTm45lP015aFDdtXDDpw6OdgaIXSHgFezHFCCk7+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXY2ZCRA9TVsSAnZWagAAxuoP/R4rewoDucOvIkjg1cx1\nA8IevvL0TFW3v7J5rR8VDibsF57acOjAVet8H1CwMfqiDeyFZa5h3qwryTOH\nHoTGheQ9ogT1CPuriuqXr5wn50LazguRkwrK4Epeej62IMKwh/lMXlXe9SnU\nKOqIFfwvaeffIEpGHf2TIkrd6C0/UZZqMXnuq83/5n1rZyghknl7tJjefXzv\nKUbkbR4kSQMIw90DSKJWQj6/GPdX8cXzdk3NiHpeiudrvROoJK3wOxJtvSDe\n2v7OG3JVZeh5ujoisPun0aMr1FLRVAWD/ylotKhaYvKJgoWJqY8CFyWMLHyL\nk594TCFx6LZT5mOV5YY9LIm3COJ0LVEv7j+pEPNVNv2hXzH0Cgyi+lX0tUn3\nkKybL7wZ4z3hRb59pXIICB8GDoDNJCNUTc7v+pnSPnq/I9UY93nrZCPnx23m\nrU7F/4zzNckAaBKqX0ubI9AKRCqZ8uAv1q0GoSYkdpbvmaEVOwDfUDNfNnnY\nePgQdlnuWbcuZUXbo2Of4EFqHsG4i5S8kfr+eNwA+Hz82xiAhqvn+7SfhbZn\nStT8zWSWququmU+bJtqJJPOK8K4M3yLsXF62Hv5Olx/v/6DL3W0ZrlA8BjaC\nnaKtO6z5vkf2kOj4ZxD2epC7dLR7W+8WLUWu+XtRgOoYhA+PbeD5qWXBS7/+\nQC+s\r\n=1IdN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.6","@fluentui/react-theme":"^9.0.0-alpha.6","@fluentui/react-provider":"^9.0.0-alpha.15","@fluentui/react-theme-provider":"^9.0.0-alpha.15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.15_1616743833385_0.47559753911459257","host":"s3://npm-registry-packages"}},"9.0.0-alpha.16":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.16","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.16","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"0c13fd453dd7e9fbb174b09b81be3acefa641f72","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.16.tgz","fileCount":43,"integrity":"sha512-OQn7jyfX5qrEmFaQ5Sw6pFEzkOV04hWQSj3XKWzOTV6PZ+XgAbWj09Ol+hgh0tBkn/oJum3mEow2OloahmH9zw==","signatures":[{"sig":"MEYCIQDuAc6omIPB/IRiOcDmK+y9pqKIQdjKzmiK2yND2cXF9gIhAJdXAYtrFCARB3isj7jpVCZbjeuTgAUTl+/I6VkzPC+J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYtQXCRA9TVsSAnZWagAAoa0P/0OcGfEtdAxW3niCAugA\nUbJRwXK+bgVvlqs9z06Zx7pN+k8bCMCf0Atb+Ukx/eUj1wdsD7brqDsdxxGt\nxTb1x16GT0T51dGer/yu3cUecVfcB6dTZzzBDM+SA/1PYCtnoj/mTwzkZceO\nkAhtnjVnvgra2gIlptJczLHRzec9CAjeIL4fMkDEMAvGsQ5emz8qVzvI5ETn\nwVRcNDQ5lOeLFVzKcX5LnM/8fa7s/wQFB6cXI+KeMxPGNRZjW7Ai3VYVLGFJ\nYzwA8D3IhJzuTdhawNyoNsn8grF6SbR2jXedfUul0FeFLNSi2NtBldIsK+9f\nc6KHSVnDlZDao/J3kgCo2bPUi7jbt8vxQLzhjSTUG8+yR2ABpSSfcw0krq8a\nlTeu4vsmAQQCRwAq/gxJNcFDyq9ewzWbJe2w4wDVmiKsQ3M/E1M+oQHirZ4/\ns6rUS1fjHg3YZlS5ncsdelxtrVfG8uumJs1f6nJGoJ/aiGD+m1Io0lvl9prh\nH3wahyVL8HSHEpq7COGmlJj56JoddyUuez38bs8R+IpeoL4hL0p4E3VGt33R\nzf+L0kbgH/kX9lqhtGM64rANt75IWpFkRykFLJOnyrjbkax/wEhYlttEqxmS\nDLoCgVU26lG/xdlooW6wlvK84RaINjY9VFHgeURNcmR+vJ0qLJPp0ZgyJt0m\nLJND\r\n=8FtE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.7","@fluentui/react-theme":"^9.0.0-alpha.6","@fluentui/react-provider":"^9.0.0-alpha.16","@fluentui/react-theme-provider":"^9.0.0-alpha.16"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.0.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.16_1617089559085_0.5685995616641846","host":"s3://npm-registry-packages"}},"9.0.0-alpha.17":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.17","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.17","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"45cd704a6e46f7056e73f84456cef6b15164b03f","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.17.tgz","fileCount":52,"integrity":"sha512-OIVRTvAd3nxWH7bg8YkfLWFcnDl1qvAI44Sup8ffOB3eTHg3ZioCx2tvkC5NHPYk2/S5YVYlB8ENDp8YmCrtPw==","signatures":[{"sig":"MEQCIFdL3R+zuap9BfceZoHHdLnRE0yjPDp9WeRFQJcpCextAiAjClcZFz8MzX6r1CIaCzB6EjlAXaU4NsxSP4/NOe3h/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8cQCRA9TVsSAnZWagAAcUAP+QEsrLlzauHw+//EVFtg\ngvfR8LkTNyexc1lt5hDILyoRzf6Kk6kXFnAkQYdoefhSks7Ranc4G5r1dJl5\nm+f8nYsQfVf0p4/PCArM4AQ9Rf5WsTENHHDbuIdI1jwtw3yeIygpvy9Rc+ht\nOUef2iozwxGwJ1uszPhlNPu4sQ/Y+VTCcRPWAQ80mhJlG01Cxo2eDcxmPegt\nSzsaIV5I8aq++Z/pnIgWM6J1fSMMVP1Rge2u6XFhWsuB+g4Vs99jCvkYQbpp\n7AYsr9nGg4WNLhexTdaK/lhg7NCz33faTsWG/adS2eDaZBVvJ56Mu5CMCkzD\nTIUClNTJsXZrGgPRBKc9+dr6DU4xLCzeiUFtGenmQhffJE7hT/Fv93mA9Av5\nrpmBfavb5gnm77iYxVzPfD2BXyJkIak/QZJ0m6wTdEaCe1BPu6EEa+k0xA0o\nN7SRt77Zq9GrdK3rjvapG8a4Aj++557yTknhGQlFeYhxZJ7xo10KwzOZ7gYb\nmcf0LJWqd6077ZomlmRCX7MgAtfVxpdtETAEPIbqzbK9kzJXqcyx7p9HMByF\nYjNSa7c/g6jnfQfqEL7qCNhTLSo4CnpR0OCngcn+iWKp9CdFNKobPB5AmnAT\nv036BXTAGS9ygB6BY8eClnvOXeS/srFajX6VZF7tIXJ1uDrdOYu2ZFP0IpMb\nQBLV\r\n=jutI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.8","@fluentui/react-theme":"^9.0.0-alpha.7","@fluentui/react-provider":"^9.0.0-alpha.17","@fluentui/react-theme-provider":"^9.0.0-alpha.17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.1.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.17_1617151759939_0.6542601175459342","host":"s3://npm-registry-packages"}},"9.0.0-alpha.18":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.18","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.18","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"5b2faf95199a4f9a8ea96f3a463e296db8203237","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.18.tgz","fileCount":52,"integrity":"sha512-uZw+nEUpXI6dcIHbuWehMStOc6TLTuDBlnTFY3OSyWqZDAveDfANVjhmk4M8MTOfXyZeOEuLhbiJTI47DOvqkQ==","signatures":[{"sig":"MEUCICR4T5WjcUiL+nTx5vsD4joOJsusokCUT8g29ixuP2yZAiEAypMZH4foq6gSobTeteH4nGBhHzxCO16zs1gQ9lSj4ak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZikUCRA9TVsSAnZWagAAVf0QAJ/Y9oD0C3sufjSbI7YD\nzugaFeeadugG+UUacg83VdCGGp9HI2Ph0uhkwYSVH3tC7XMgKJvSRwoxo0X4\nWKOYfY1VFFDJ1pPtgZy/TocOkEtXL8i0/6E/1G1ueB6xvAhTlcn0BnInYKd0\n58PITkHe5MbSCTL15ZQ5n+KoHq4B9QmfrG9J4QrrEZgN+00aPOiCKSnfhHx+\n/kCEx2ToiEQZH2Wp1kHqovmllnHr8qp/4YPhQYHQT+oO/N23qaqhKcWDep7D\nEJvbRfvVBZ/yCsT05Pi5/i2KtMUC++UINhrpRLb7O/eJ6eOcBLaVAgdYsZV/\nuPeDR8xohNgBgR/KMMqdTZ5hk/0R6CjUbwlskdX0OPt9ebqklGB6TkvNSc7P\n6GnaSPOIwlQ+9hX11gtHr5T3vDkGVPglWyxG921qF0c1amJ0rucXuu2KuWbJ\nKwJmSY/u/On31b/1IC1ZdsepKmT46x4HXxwzQwyZ9D/cdDLJPKs1tsGdsbu9\nMJpKBtacch+Z7aII2W9aM7/+VXnIeEqLHYzct2AjMdPfx+kBIC4hu7N1IQ1X\nj3UZSznMaxqTLUa2kWwosCIR5F6EMe0rNfWO6nsKkSZgOg1dG7ud0hqnhYl2\nP932caCrZqIiglJ+zNJuU8Wi+7RXPKzTTzaWuIqdBx4N8SmMIXOg947mEzaH\n2brz\r\n=waGz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.5","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.1","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.8","@fluentui/react-theme":"^9.0.0-alpha.7","@fluentui/react-provider":"^9.0.0-alpha.18","@fluentui/react-theme-provider":"^9.0.0-alpha.18"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.1.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.18_1617307923787_0.5405997186434028","host":"s3://npm-registry-packages"}},"9.0.0-alpha.19":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.19","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.19","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"87664a31a49d7d12188c0d385c217dba6f0f7f2d","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.19.tgz","fileCount":43,"integrity":"sha512-xheiBg10yh4teLqFzEIfs/EzcjJHbmFTKmqGhW1M99iRPekk5e0Cw9EnTVGJ3rqKGIj9aOpvgs83Z+psqyYjhw==","signatures":[{"sig":"MEQCIAXIwicEPerrTUJutO//jlKvrugNwY6dEjpSdnRyATNJAiBHg77hq6dmQ1LoNqtB23ZzC07vTlOhVw2EvbNxfQOB/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbrFTCRA9TVsSAnZWagAA6HIQAI5+p7j4z0PB/wZhY5KY\nWlPR/VkSBEJ4BEMxRYScddR34QfwY3Bis1p1+ln3f0ud5qVj9t4Mw58D8NSu\nZ268KTFAo+VrXDZ+Js8DeK08HGv2535QE4yEVr1z7G3pVVkLaXbfKGXdJNjk\nwhKqlKgRXy0mkDoM+QvSFzMa0b+TVDOlWIvrG2XHOvt0zy4IvLUvNyxYsDe6\nn3JMyrI6K7OBmj9gZXGE2CnBngtyULxwftF769ZbfLVcFm3s13H3/54rL60H\n1xnOse2MwstQBvUvQEOufgz+0F+Gph5pRdaaU1i7glgif3fwVD5xrHHet4Nk\n+91YTgkpVLQUfA7ViADsXs9zmbUp3NIg8C27iPlq4q8xPnt2eCwhjttH6rSi\nKriyBANGQq+VVm6iiZr3x3hAvX0EJi3oDptzCwmGTXB2JM/faZsD1wiShF0A\nTUJ/MpjnhD60FbqL0fHvslm3JVZrwquzaSoSlGAoYeZN3L4Kwm7OXMWxo5u9\naLXaLu2AOgz0mCzVmshMPO+ApM4IoYdVDObRHpviofW9C0euNfXzoOai6IDg\nN2M8xfn63fMuKujlttm/G61dR8kioR4Akvs35zsOY0RyQ2teOV25FbCrJOFb\nfzrlRZ5tWYL0E2+FE7AWZNUKtBAI+tcFaRlG9xKGYoh+33xhL/Z/v3zFtQR6\n+Ydp\r\n=97FI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.9","@fluentui/react-theme":"^9.0.0-alpha.8","@fluentui/react-provider":"^9.0.0-alpha.19","@fluentui/react-theme-provider":"^9.0.0-alpha.19"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.1.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.19_1617867090711_0.5500657548691645","host":"s3://npm-registry-packages"}},"9.0.0-alpha.20":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.20","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.20","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"416129762ba2332c290c8290b0ae82228c1511d1","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.20.tgz","fileCount":43,"integrity":"sha512-J7ouISJLZyQBPGvRoEp5CYXYEAqmw3ZUYzht13v9/K1iyQuZU/sn80osE6w7gJABk237pwowGymRT5GcrY1nfA==","signatures":[{"sig":"MEQCIA3hgOHgglqk5U8AQwJGDxpO7NoAWBys2BOEnlPB5qPDAiAm9pjVeFmuRmotjHgJQI6suA49uLXLNY+Z9dn1ULoS2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcAJvCRA9TVsSAnZWagAAuHUP/352ig2sFGolGjNjsU5O\nHq2uS14dEDjy+PnCGtXUfHWCfP44VXehg+73cPWe3TaLV/NyuSbTzolk5lqM\nY53b2f+oTPIoiz73hw/XUg3cOlDDKrRUYmVwJUKVk5fYglGeTdStMNlTcEfm\nJsYrQGZO6l94h4+/xBqu4fl5TanBKcv3bursu1jFviTPHPIYuUHDfCvT6kY8\n6R7uhuBPeivJtm+RNi8lwaJ08q/9khMIxWBCldiF+wk1F2oXR/pWWLhf6liP\nYTiV/cBP436PlBhr6HiXscuhNsrIWfMTLPsppCmziYEdoR5ISDj3koDfLxqj\n7gZhFbhzwhmiuXdUVdL7Jn1Z2HHq3CAWO41ZDSC2QsBGGyTiC6YA9cMkw9vD\nSwcLOy58RWDPvxySZH7GRtR3T3ib/z2RRHYRopDlH7zrNkwDNMpptA2j0Ny9\nE2i0Cj/s+YjQ/YUGuO3/a7BFKf4NmjNiJ7wJJuu6T2UgU0u3o1DbUCkRFupI\nT17ZWI2JL/5ForK7yyeuIYNdmgDRwOFd4vrVsSio8PsuA+VvsLNizhURlHdR\nH7OPh/Bcc4llk/nO0MAQjy0ofOPHYofspggD6v+CwGMPXXsbw315byHgGXio\nByzpHJugduz/m2XXr5tqg4PuhRuMHwBZ3sOjxYXZWTQoAxcEgfAIL3zcioKX\nDFeg\r\n=z0MT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.10","@fluentui/react-theme":"^9.0.0-alpha.8","@fluentui/react-provider":"^9.0.0-alpha.19","@fluentui/react-theme-provider":"^9.0.0-alpha.19"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.1.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.20_1617953390902_0.717639863171954","host":"s3://npm-registry-packages"}},"9.0.0-alpha.21":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.21","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.21","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"f221e16f58c9b29383af8428c5cc8bee273df28a","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.21.tgz","fileCount":42,"integrity":"sha512-rYX6m9K+fiUObljEO8c3hu4x2ES+RdKNWRWwBINdTgJC5Bkr3KPGDjOSkjwrc6urF+mNe2vZSKsdiFGdwe6q1Q==","signatures":[{"sig":"MEQCIDZGo2icPy/zNgCtdVkO+7F0NgSfpu1hUofuBGfv0R3bAiALR3CyLeM9q30xThLAZrAzphAx2EyOx+0Xeh4ldJg9TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdppYCRA9TVsSAnZWagAATZIP/39qwGVh4z3qcvWTdTOA\nMM93ZjxseLgRy8EtgpJJHCBJA91Uswp25zJtj1Bf4eBZJC4JFvhwWzYMBu7A\nbAZq9LVoC4e2FQn5wDBPYONuPMuUunUk2y5/Iih7JMSDjonpUBgVdov4aoXf\no+ixgLLt1gRX+vZCh5F8xYIiBox0sv6ORHHyPCZaa9U24/6H46NVWJORzuj5\nqijQU4jZqbtwDMcGS03Z58F+qe9fAuWRXlM7vM3nRuEiS3uFYfR80WcCRPd8\nUdu7QugWkF9fHdpfF7axZFZbRVQ2i1mpYQdAXfQsOhXedew2ah3O0J9BiazG\nJ4x0VXbNHYCse2qwcraiTy+oOmby+NtCYmc0j63CbCY6mGXztFPSYAgmWIAd\nx4p6jPgeMgzRDsbQzGzVkFuWB1sXwIVM84WbgwNMZMFzG2fFqlWPyrYM7QEs\nAW+E14pXYmpR6IOLgqMwhEVlC5D+NeupWi+0uPPlxnJXn2w4YJtPg1WIGp8D\nXzwqqy50DEnCBDO/rbStC13GTRj43cFZUSIkPasr4RpIi8ELJhddj1S8OdMD\nyKSbfqYMJhQeakq6mIRBlS3m3buMPmU0jNytk8wSHkC8xPhH0DAEsJ2V/hQt\nQzKggn4aD9lEGstqz+pfGbNkN3iSlcp/E6dqdUbfk8oQOx1t1asnVlyqR9FN\n22hI\r\n=WkW9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `ax()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { ax, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = ax(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = ax(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.10","@fluentui/react-theme":"^9.0.0-alpha.8","@fluentui/react-shared-contexts":"^9.0.0-alpha.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.1.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.21_1618385496320_0.9160346534839321","host":"s3://npm-registry-packages"}},"9.0.0-alpha.22":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.22","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.22","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"44e3628a1eacd73a7735a70dbfd37b60fb0701ad","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.22.tgz","fileCount":46,"integrity":"sha512-h8SzZ0FrX2m29XbvaajDIOueKBlO6iitypgntJngqNkcQfpo3qd9VVLiJxgV+Vnj7nKRGRnHW83xVNEOZ+5Wjg==","signatures":[{"sig":"MEUCIQCjpJqBq2o1SiOSP0gvVijnua52kW8ncGYMd9K94S2JDQIgR+JJV+70zz/3wIzIM5oWTergLzRAgsHLy8TpTn0vYzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgedJCCRA9TVsSAnZWagAAum0P/A/7dWB7g4Fp9M9swr2r\n3328ywy+bZC6F8J3J3+ogvBaTNrWExPGEaPURprk05PlUji1bhkMasHUiCH0\nUUX/tTc/Sclvm/r1shI2PKCJQG1njdLlXom51h7wnkqrf6jrbqUW3dkn/3zo\ngT8ZANlqSuf1s6/AnU3R5DUykR+pBZdV985gWwLJdUkIYB19N4Un5sTqLNjj\noCyUbvGthdIwvcsMwdFmTNQOjh8++UVFDaNWbFM31W5bbYIbWVMRiOUrxG3h\nzIkkiOyrj3WMUVCkeEp5u6srmm8ZMjkS2FRAipGsXXA7viZSMjNQtveOL9sd\nuwrbe+GvOE4BFVoIVgGEZdljZjhnPVTe3lHnhy5YQ7j8zuMuVwjdjxXDkwon\nfLwiEJZ0JgXMioAuChMLuMGOi1vA+fNpFkumhc42FxkMP1TBe5ZUaSD5Rj5D\n4ebhvVdQDnDHKmsXrWG2nKlDLqWYDDnidjPUGuzrOgsyQSA5k9Y/J9aFl8bN\nyPRlNJ4r0wpG4BMFD1t4ZI//ETM3MgRAy+ispH+f7DapPmP8nl/68EXotD2H\nPvKeQZ2xa9aML+96GQ1Ap1RYSBEXLF+xmbLn7QtD8lo0uOTK6rp35OeM27t9\n6LVkpHr57g1T49P39fFicP/La2OLO01dnpC7O74OFurrn0ljSYAlqcyHUk7D\ne3NJ\r\n=GsnH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `ax()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { ax, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = ax(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = ax(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.10","@fluentui/react-theme":"^9.0.0-alpha.8","@fluentui/react-shared-contexts":"^9.0.0-alpha.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","react-app-polyfill":"~1.0.1","@fluentui/eslint-plugin":"^1.1.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.22_1618596417958_0.14535009949485111","host":"s3://npm-registry-packages"}},"9.0.0-alpha.23":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.23","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.23","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"721416aa73a120dc089e4e31ff739c81f51c06f6","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.23.tgz","fileCount":55,"integrity":"sha512-LqRoLQC0iBdAgUXT6oYFC8uBoKnGOkwNvm3Vidd2lQDBITN3PuKX1P0xhD/lZ2xuY0sW/MEiUFO+NmMO+o6r4A==","signatures":[{"sig":"MEYCIQD5n7HVghVth0tmopgN00lHIldxgAVYauTC9l6QsUVDCgIhAKP2eajIP3s3dxHJWv07INzwB9a441wD9kuVLWfe8raG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfoLrCRA9TVsSAnZWagAAkqsQAJyL8AazWq79yF8xBLCc\n6P6L2cO0SU9EVERd36qkO+0l3E8nXoPqJtZ5PD7vJpMJfDeOW846uqwuX6a/\nBdmXyWXmCrmmXyXQllTNL3x7O5LVo5PeSOEsMIo4h4bocobu4Bi3iN3uOAPG\n+w168wfod22yWxb15RBcboUDiimPH/PfckGlEw2DtBLRYl4KIssoPGYfhKQp\nrdo78hq2Jzb9oESy1wjR2HxAhKbBGGt1deCSkrxHhed2bq98f8Lxn5JxLj5b\nYRLcICuMSScFdVsZxiXuhiDuFw34kloeLOvF8a5UDwn45i3mdLKOIlEaZtfP\nTY6L/ctI8Z0SCxJ2Ex8KXdGUABwyItuh57A4DuLuDDQKgzNDOfS/scU0zO84\nQevXlnLohESWIwOgMC+8Pm9moseuVUNH2SPIPWecKNztG+ALuphahKgAdtKE\ngJh36khxnTBmY5WMuccr6BESegAQ0b3MtDQGr8B4WcZ6i+7JspMf+smIhgOR\ncn13h6Od0E5YhbmKAIwxRtzO/Zn0JxcNt2gSeaZOs4pMS8yBQalyCQGeKW/j\nAZ1b+Gewo3rVyTpD0q1KYMrbBvTiVrj5fWoDGzRHz6isgjI9RlGPV/nJITby\nuV3MvrvnWGuoBqjb4v2/GtK7VbtY3ncktm4DrP1/I3EDKtQyJeKrzou/visA\nl4MK\r\n=Myh1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `ax()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { ax, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = ax(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = ax(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.11","@fluentui/react-theme":"^9.0.0-alpha.8","@fluentui/react-shared-contexts":"^9.0.0-alpha.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.1.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.23_1618903786886_0.03659505067171853","host":"s3://npm-registry-packages"}},"9.0.0-alpha.24":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.24","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.24","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"a38089add6ac6a1a4df58743e1d222107dc0a755","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.24.tgz","fileCount":55,"integrity":"sha512-9Ca5O749tF+QiLWvkmt/QCanR47eypBem8vdqKj9ubeu/aJP68OT72yBvotNRfhzsPE91aHll0604elry6E2UA==","signatures":[{"sig":"MEQCIAIQKU2bUH//YMKLyrJv6RpLKp1+q8DjHYTZ4ERJGX+pAiBwJ23Pw6p/FA0zlMnXMSJmvlrGEhV08uDig335lg84OQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf9RYCRA9TVsSAnZWagAAdtUP/jf5C+DGUHjIGUmFmbXD\nPO3T/AllPOv2j5koW7fGBzOPc80jjeynALTJCAvDXanSdMzVmOkixHRS/ZgJ\nzD81LaUE7p+qNzeQHMoL0nOwV6nw3oIw6GvZ4a5+DO+KAsW8fP157jmx8kRT\nih6zoV1CvgyaAqDj6DN8zgHsT1YX7kvBMmswgePgnsZWze3pMXBy0nLilCbt\nnCqk8vSeVLZirzRehztkiQpScU4BSkBf1GZaqhu4n+aRlV30/GHjG61Nip+A\nVjve0i7WuNnQyimvoPl02DKugvmDzHTkOXUsHUv1qlXvWdeDwAopEv+3sMho\no5yj/PZu5bz23/8nKsWCCPRCo76aKQWZYEwmFY+wllwSVmAMevTKCo1BWd/B\nMPrG1oo/VeovUOglMuaMYv82v2pFqKnSOLCBxT+ku6ucAFHY9I1M/0WTIDxa\npFIVfpMlSvk+jCrW9e0PJIwL1hwumG+1WYz6X9+LadV3+MCKTr4YU9F5Lu2d\nmh1dhxVYxmIGeHpxkbn4yaBfzeRMCfErWnp0eTnxjwR1Z9/r6lDAbah16cve\nPBx1uFIqCucM/YDxSbX8GBVIiZgT5NlexMChUqK34a04DtDql9idEBLRH8jA\n4rtHO/Pdpr73RMzMxWnaT7aCpuk2pFbfNQJWc6WOz8eqD8Ln+cnm5h0xMD4L\nQr5k\r\n=kKKK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.12","@fluentui/react-theme":"^9.0.0-alpha.8","@fluentui/react-shared-contexts":"^9.0.0-alpha.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.1.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.24_1618990168022_0.7884576717282734","host":"s3://npm-registry-packages"}},"9.0.0-alpha.25":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.25","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.25","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"afaf1b5c8f0900be4353f0d55a034f493961a62e","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.25.tgz","fileCount":55,"integrity":"sha512-YI0+uWqj18y81fcJlT1V/hsvyJ7qzNIBUvvV3w6VGg2gCaii5N+Sr5UwCL10dPMHccZ6KHcSf+m0ZixJWyve+g==","signatures":[{"sig":"MEUCIH2RUbTyUTXiCKjj5XiYu3/flaoCSYLF4RpiViU2i6eFAiEAi57PfFrDhTjAj86UDa276roP7kx39EK6KOaSUIloDgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggSZSCRA9TVsSAnZWagAAnkcP/RBc489KFUCQ1EB/65Uq\nZIc4EjJlslnfzJjjb8gig9FgyrJnFr+gO9yfbxC/+05pimEBi2JuR5aiaSjD\nbKz3V6qdF/ytLKB1JlUrce0BkakhMncbfG1Bv20jRcoTi82ppzQYXAqH6b2v\nS50ksjnStP1WB5+FLYU5UzRZkBvNC8j1wcMkZFp1a4S6kEisNutyy8K8rzu8\nkfJ8BrZw5dQc9zz1ZH0VAmwD3CMo4C5hiKwpTO6kuhOT4kzuSw3EEApSbn9m\nzEDsERdEJQ7Fu65lhFk2QCdlrNP1fWOI+C09MSAk+kG25DTxIP4AE0nZkVpO\nlwLznM5SWJqBNOUhsUrDYYDo+wlE3b7ZnlEPZP0BZA72z8FCQN2ARBF+D/Xf\nzmwLp/vvMKHu3lVVQH1nYiTvNZHriaoLowB7PVZBn1nVOSPLe9yq9ehfn7VX\nGIVI0AtYahlP8qOf4cXI5DuS0gMGu+/taC/8cY8dgsmxYQJrxTw7N++LGM3h\nFN7DUuywGj/z6pjje44pZiP169qYludH25E9+2vlKnEfnlSeO8iakrXWR/kb\nfLkiWN5y1IaxdXpzfFwKgqHTCgxIosqz/dK5loymG5crwRwK3IgiV2jMaBj2\n1CO9vQ4Yo0goZy9Vdmuk2rqE/wH21zrooBVLsxIAPDZ3GKYNPbOxQaIMBUse\nW6Tn\r\n=hCb4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.13","@fluentui/react-theme":"^9.0.0-alpha.8","@fluentui/react-shared-contexts":"^9.0.0-alpha.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.1.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.25_1619076690535_0.3454796056599998","host":"s3://npm-registry-packages"}},"9.0.0-alpha.26":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.26","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.26","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"a4e032015a8475b5edc30016f3103182afb27283","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.26.tgz","fileCount":55,"integrity":"sha512-ptvGZFIQWkNMNo6Yf6vd075QcHBOxvv7eswFSS3IbNnjv9TnQNnOZaQy8kWhEwsS0SEiX52u4zhMUiNfaiLzvg==","signatures":[{"sig":"MEUCIQCW/m4fL4j8fZjnQoUzAreZPIsTN7MUzhvaP9fIz0zvzwIgU3KYU1/yjSDuk6KfgHhjeC3+XYggrEmxwc8JBqSBTHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggni4CRA9TVsSAnZWagAArGcP/RMcLLep2wO6W5H7BcDx\nESI79xZTUt7hfK5ExOVdH0AfUm4w+xY/DLlenqT5+XTVsRWAM/CNw7u3aHte\nvSu4mybHY6ug8Qg7adAt1/w1yq59wx7dBmLAmJTXGuvu6A1DXH0NusfytD+T\n0KluQHTYytQAtoDAeGhFPOCDE7xd6vR0+lyqSOtHKSTxAXz2WuU6+Zqi2FIL\nanD8ezUMLG46nj/J9Q347y94qoIFt2ViC1kLtqSLM2eBeAEh38aKel5meSCs\nm192Apmw/KJ6Ur9wkts4qXzZmaiAlXt9hbLAyGuWuWG9Z3NIrGHPMya71TLR\n2uabMNqVPOcxYLdQRz3U6TQpLlnoDt49DFI4D9v6JcxqmMh6WJ8xhBHfGvxj\nIc7rJkAgpKk2HH2xkFKHVJJjd1p2kssZ6JqZqqIvqQ+wJHd5rXzekfAHn/Xr\ndDlAjvRSLTacjnuPG8xOVRlS7KwxRhc76UzIaRldMondPIdKAHznqvSHO/Ra\nVwLOn5vzbBoc/ceLqX3xMqYJYEaoboIy1vkvNqRDoXmK8/4rE2Cw9Q8lh/jh\n1DXWY/huXPDbwJm5weFAq6UYy5vlg/Nf4cCiuVeV1NcXFii/ngqUc+t17YaP\nV+HyaqShvBnKPnCpnr6aHKljaucnjkOey2LzRQU7I4fGJbMZ/cb97s9jlb+b\njf0Z\r\n=aT6M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.14","@fluentui/react-theme":"^9.0.0-alpha.9","@fluentui/react-shared-contexts":"^9.0.0-alpha.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.1.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.26_1619163319811_0.46830490116833356","host":"s3://npm-registry-packages"}},"9.0.0-alpha.27":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.27","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.27","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"8ba8a6452b7f2ec778631541172fc54f676ebc26","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.27.tgz","fileCount":55,"integrity":"sha512-+3AHd37BCNA06mOW9QsfjsZejZqmwonaNH3bN4K6InOLxtCABlbf6rsRr7Ajj7irrSQqW1W0B4qMQ+IxK8d+lA==","signatures":[{"sig":"MEUCIBT8lJF+SVkWSni0PIOSEIO7pFBUWCx8k5XtdMW2DQ5HAiEA35/9732dSz2TNtT7tVwe995jD/0N1Yxfj7MocwNPcmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghmxgCRA9TVsSAnZWagAAtncP/1OojchQAxag+KpagCSW\nsJvDorSI8iRlWOt5Y81kuAGI+KSPWm2l75QknoVe3/ausYIfcdARlRzLR/Yb\neMC1WsnQ4RgOniP1wrItHlNmfIBYrEelOqW51VujdgkRDxeV4P+Ouf2JwO2T\n3M766r41OmiZlpSFc4evFEEsBZzOs69sUuc3CGJdhj7igA8nyzyaDuIjdJD2\nrkX/kO2pkv5EL/xAvllIERWTc4Gx5ZPJs8iyfhmEr6bBvK0H51vWl3JcibAP\nS/A6EeHq4pyIybhjeQ9VZQw+bith/4eLLaGVHR4QWbM30vesOvBD2Oj11yU6\nUGAKnzfpR3YF7qoWyMjp4pfLnMPyl5RsHbraUMJZkcMXCTa87oHNXKCXxuds\nJHbyE1fR5fSMYB8qfDy72zFV3h+mKjq0LY7sJy9vBSJALdEzddy/+/DX4Met\nccvkdti3/ABc5WykrGFRxafDRkqIIw0YVcJ+GOyjzjyt9w6Agj9JMCeWkaKw\n1XFbO9rrK962YxQQFRniOtCJDyUAi5rBRGgP+FFE8WTqPznDQ5MQnKJTnfxb\nEwyuPuQzBz/oT08D+EB+acn32JXJ4ap4NZLCy4mPDz/y1JudaAW1yMGA4om2\nGn8UEiYGy5oB3Iu358Rrawdzk0OAoEpuXoPupt/MY9R7AeOHcM6if3x6Su3Y\ns7oO\r\n=oj8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.15","@fluentui/react-theme":"^9.0.0-alpha.9","@fluentui/react-shared-contexts":"^9.0.0-alpha.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.1.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.27_1619422304036_0.343794223010198","host":"s3://npm-registry-packages"}},"9.0.0-alpha.28":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.28","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.28","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"d4cfccff105ff72c5ba1c5c4dacbfbcae8c9afcf","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.28.tgz","fileCount":55,"integrity":"sha512-QbVJ3Ypt0FxQGo3VN9U5r5FzPgX/f6r1PEsuQ5GmSRXn202mgu6QcI8lEVTeM28VgEda7oQAkd1p15+frs2xOw==","signatures":[{"sig":"MEQCICGuQP3YltcKQPg2NVHoNsSmsy3V8XkJeRI8fYrRo9RYAiALzR9BzB6hTT80Xb1GcqVVahC916PvYHxK24ClDqBVVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":90208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh73BCRA9TVsSAnZWagAA7dsP/RNJZkPTD3DXcHJxgo3K\nVZvIqx+QhZL+eCvv4KyA4XTGA4hxQFu+61/2t04rCba2uy/RavL2hYvPLJEy\nKgOvgu+Nb0h9IKj2psgRg7/ts2MiSnF5bht0wf+1XAIN0VwGnLVXKlGZbFHl\npSDTdo286LlB8HjPtXBlnNXm5Os3BUlMuESyCdoMuMXK0PnaAIpIXEhiOphY\nw3f9hYWPexbimVQvWr7pd6uw4t38SdyzpORTcFLCEI22rPI0EEUZHc7oee/B\nQgfO0j71agoX5FCcOjjIgDN4zrqJDUbJumkc3/eRv+TtsOJUbH4rQBt8Clrj\nbfRquyUf0sh3AGcb2dcfGKJbYflH+MqAUYhdzznzGF0mmPwN2sb9XGkvWRS7\nHqK2jrnKc/ImLgNrc169k2/pDHYgLSVAOYWP5YqiOgonkQ0fkfziq6NEYs4J\nGmXgxEF+K5y1Tqyqpx4ImqyfRRXEVwVcSXbqUrvyue8x5/8lWj+47sM4DeQm\nT1enFcGGf+7+iY9pquX7vKj6X+ck8wXQ/jRqAOTKMzBs6R9HYT4mbm8EySWJ\nsiEb+mRGkimEz+BOJxU2Q+JKXuSA1PDROzu1YmoiCq5bJqfRwVmDyRLyW5MI\ntsGgInep3lz/d8+9q2pEzSY/2UpuBxcp2tdtpkoEnKbgqltDEeT1TZjNG/Sg\nKFbF\r\n=JjgD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^1.10.0","@fluentui/make-styles":"^9.0.0-alpha.16","@fluentui/react-theme":"^9.0.0-alpha.9","@fluentui/react-shared-contexts":"^9.0.0-alpha.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.1.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.28_1619508672456_0.11389546300095144","host":"s3://npm-registry-packages"}},"9.0.0-alpha.29":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.29","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.29","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"38215584062986bbc895e4c3d1769514ce5384f4","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.29.tgz","fileCount":55,"integrity":"sha512-bn6c5VZoGxMgBa9SAEksPV7iDf5txfElj+ZZsZ3qkSLPTbtHDyHkaV/329+3R03AMx8lku8ZQvoyTdKjinJccA==","signatures":[{"sig":"MEUCIHrZkUMr2D5XIItuHryltDtQtlergUzZ0D2pfeBiRAM7AiEAvWfJ3R6dUND8u0LqErS0EjoVpjRSnWyS7GEymgjbprE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi7RKCRA9TVsSAnZWagAA/W0P/1upeXc8NMJs2rbS3mkQ\nPaiEy7F2QB8V/IIhqiPOiR/4JeE4wyJOA6cHiAmB83XcWHUuVQ4K2b+fh96z\ndpHq+ewBZBPRWpwNf2aiefEV3TCrA8FwaShcYfYgLfJ7GB9ho5pqqutKmraa\n/VmF1hMMO+vOk+eAvoSd1OMA9xtFwxL/i7k59k3HZnAa2MLRfOr/VZyZ0y+r\nEkH5LockCVqSIyi2drDx3AWTcqTaHa7eQDJP7oq1eT1Y12sjVN2i3nnt5qtD\njLT9h07sxbeE0adJjYOwJnS7Fwc97esmiu4WWb+mUVtLymw7j+wpki/VBTw5\ny4ZO6exHB6XxKYjJNw8IMHubW6bSJMyQT8GIaDjXZLb6BYqYWpgLR8X9iELl\nMJSuLriu3Ek6SIlUWtvTesmCjUfUd9aXuT0cdmEJYHZytil/4u8YZzd7IY5V\nY+d6MwZVC0xEwUjfhfURVSMxFYBLdwXoZv741QtaVY1Z2Ix5UG4AgQKg8VlY\nRmUujGcYoe3GzuxZQa8Eb6I5etXjmGyzYmyNCNuch9agWY8r68Oz07Sb9XZH\nx54gLqNQoH7eRW3ujl7V6KZSImoyQDSAZvtjtOyURZ+TG8ufFUJ3DOQKEimv\nWQ2CAg42W1Ss1k3EIiGokDT9Icpw6HEmDTH3iCp84loZ9ac+27BUjAU2ftaf\nTu3a\r\n=xuBg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.17","@fluentui/react-theme":"^9.0.0-alpha.10","@fluentui/react-shared-contexts":"^9.0.0-alpha.8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.2.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.29_1619768394447_0.9951609544570552","host":"s3://npm-registry-packages"}},"9.0.0-alpha.30":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.30","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.30","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"de513671e168fe50bb97be066f1fea307abe8efc","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.30.tgz","fileCount":55,"integrity":"sha512-onjCj+lqUYxYZHtMTAF1zio1R8oHWBVnyLH9qAwsa6R2inFtRTeQZqIs1FrdO5qBOfCBX+SYffwgZwUSJqOPSw==","signatures":[{"sig":"MEUCIQCFCFhO9dVpejC8B8oiTvMdiu9SJk2fPljW6/gWli41fwIgUx1Lb/zBzBfIIv/1eRpkEGCXBFzEqly0/54CHU8RWi4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkkqhCRA9TVsSAnZWagAAQ7AP/A2cPDqNzvSmhGMJB8ra\ngb965JA7MU7z5ndwKL2BCl32hBpLyDpeJeOkcS8oeviCwkDlG8dkonfXodB0\n2r4733Zg1p8dBIzbZEpApGhN8nkMrWVdoRBHU0HxMGpUt0JcM9gyqWlg2zVK\n6vRdiB1nNForUuGr+zFwSL0DIcvRdW2GuS/dD5+IUO2Dc9odNlbmvgaONxPe\nYWSEX597x1gwMugwpHhpTH7pplJj4nVxAkH6JuKP3pE3PChZxoFW1yNh7lCz\nwjnb5f1aCPWMbgOx+V6F3DxWXjinX8YAF9grtMToejTVckAYYq57GwmYm8F7\n4zNuvs5ALoqGJXdeC0Rffk8+58pzYKehHEyr1d8bI0FeX3riPN/0TkEuTiO+\nUEB1WDDEKaB5Wdb0FvgSaqmJia8DZmwLU85VSp4Dx+rH38rcLXWD3pQb88Cv\n+KPOoc/wfJ4XXAFXYp3TatcwHdNSFVIjL8Fl9GvUsc+pUeU6wcg5cW8cygjG\n5tQ3fKGXICq6OSkaPdO/WQxoMn8ZqLYcbJUiVWA6aAtO4Y6/lCASpKg5RjkR\np++1urMjJR3TyxsAbfwuVS3jUYbl3k6OLPuvR8TOibJCde1kDEh6CWUsRCHm\nD1YYBMiuiEjSliVtZhmIn0LcVvgHS82LOiPSWmPOl+I9vmO50G5VwsXAqbL5\nwo6h\r\n=+m6N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.18","@fluentui/react-theme":"^9.0.0-alpha.10","@fluentui/react-shared-contexts":"^9.0.0-alpha.8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.2.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.30_1620200096943_0.855806736109888","host":"s3://npm-registry-packages"}},"9.0.0-alpha.31":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.31","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.31","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"ef1bb532280448731edd4c5148e7329fcfd43d50","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.31.tgz","fileCount":55,"integrity":"sha512-2ZqPfauPOgnO9KlELJDhcbGu4l/jsJtTeeS6ETNUsb2ZzN/3/+w+XqUEpFmRzbBJ4+AVa3ig+/Tb3D2Tguy16w==","signatures":[{"sig":"MEYCIQChqPf1rY6u99Plrl1pnNZ1ds5eWo5JJyJtHqliPDyauwIhAMMglnzIRf7IcPzJtU4S1/jWQ/B+2+4Xy8g+/06kFeLs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmOHNCRA9TVsSAnZWagAAtnEP/3OLQLAg3NN3ner23x6j\nRaDYJCPogDBg0iRO52seSzBv/Q5DBYjOeXqxal5/LdfGHS05RWfJOd6rg8g7\nc44sF3meGuwQT1L0GwMIrkknQIqwuJZ7Td+jZLsogkByM60rFxGVyEWQTQV6\nAJI2DXcUjKlqHn8berBXoS+mW3bHEtxFy6jaK2i/W1yrl/63FXNIb1F0JaqP\n5bjVae4me2+fYXisau9kxswk7tir7V2EF0UYoaNBVPf6JVT7Ms+WKNbq3Ilw\nVkyPodL1F8kgvQOWO8Rwdv9v7H7TwlSxqb8NdZavAL6ugykwOvEtdSDignZB\nFrZApVK0kLDqFnzX58fLndCAUE4qts6rNrwMBcmuzAWR1+vE1xds9/evuJar\nF1uwNp/X+nD9S4IlugnxTx0/nOeSHq8/H/RE0Y/0vlgWZfAVF8foN1G7Z2ZA\nq7Qw4NpKdJe7pdWUwqvLdCuOIr8DGQx6QCzJ5qjjKhmtBDyaDLZ7DXdSGr0l\nV9FTCqMZdt6Pz8HYL0RvXmYViTSV50cCs6jxzw7C3t74PKL6NtgTk0vMkGfr\nypMpJqONNBgoHCgGfMjGUF3oSqy/Lrn9c0GU1c2cMC8iRhQ7e2yMIoavKjkP\ndxL9re9h35zbY03opz075OLI2AMR/7dB0bqZs0k2ma5bem505hjF+93KfSUf\nwbHd\r\n=c1ZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.19","@fluentui/react-theme":"^9.0.0-alpha.10","@fluentui/react-shared-contexts":"^9.0.0-alpha.8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.2.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.31_1620632013121_0.010973156719212396","host":"s3://npm-registry-packages"}},"9.0.0-alpha.32":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.32","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.32","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"d1e2599e08463520094dbb724ae0acd25e403dcb","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.32.tgz","fileCount":55,"integrity":"sha512-qVATojkoZyPrvY0qXiknauCggnCVvcZLCAoaeMkeKa3eV9HsnCqGNrIRIOjE/3w6QUwUGGpBQNIGXsQ6o0JRpw==","signatures":[{"sig":"MEYCIQC7Bp2jyT4N0h0X0D8VjqzRdLqfvqzs/FXMO3hEZJo+SQIhALBsHP83Zdbkwo0uv9UmHCOAro5DWdwbBaj+chS5dVTc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm4TvCRA9TVsSAnZWagAAO3kP/A0DDDlFwccJTflClaBc\n92tp+uF/PMx0ljtMg2ca9XRpNzLjGylBtjl1DnT4z1oXyX5vvanYgue37Fas\nK/YC0b0BddI2vDcterIPd3/OToar1IGlL7G61iJOnWMqXx1EyiUTnf7yKcvx\ndnGnRVOmsWWS7RSp7JcuZtAtHqRliiOAN8XCszkrSWYuBL3J/GctIs7SP04F\n3t7B2u5AVAUinXBjHdc9RWyl54D3IsjlmhReu87JzYznPlea52FMDabM1Okh\naCphV1P9SuQ2tuRbgTosYG9lNupTO796AIfzqPNW5IUsqNAx3Md9Uid//qEH\nCg5J6ewFi+XIUi+Gn+KsHavo536eom5dFjW03c0iggqhiTOYb1xsNy9bU4yB\nG+jwVc1fmJDwWkwYN1qtdQR7R+iGUF2UG/soKx+VcFVIJm6eqoD4a9eQOvSv\nnk4qI+TIKKGv0rrQRVIUA2d7IhWBmsNKQusG1RAWAkWrP+A7BEk6w1hh8ADa\nFef5i5J1/NEKBg6q/OSEGgQKlCbQu0gGppbyruEzdlyrLQzebA/OwDuTwdp1\nsjvIQR/yFQ3YFMeDh1PgUGQdZRHDTcfOtS+B/+pOazjaInnPFQm9Sgd0WdJj\nuUyp4y1BZy9K5qT+fhn6R48FoNQ4iZxL0VqCjXJyKMxrC24U6HH3dt2mZcHP\nQcO2\r\n=C3d9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.20","@fluentui/react-theme":"^9.0.0-alpha.10","@fluentui/react-shared-contexts":"^9.0.0-alpha.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.2.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.32_1620804846765_0.8737049936317995","host":"s3://npm-registry-packages"}},"9.0.0-alpha.33":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.33","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.33","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"e992ecbe8f654147cdc67f04f9cf99ada8507ffa","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.33.tgz","fileCount":64,"integrity":"sha512-caLn+C3wvpJJR+c+QMSuXsaKElc8vev196SYAxpel+Q2Ama4bFQLZWvrI7GURYB/4qbrpC4ofOsi0kCQqh59ZQ==","signatures":[{"sig":"MEUCIQDLTTG7n4OABxKd1SaOsyW7yoYcYly4pLAWeu3QeJsrzAIgeKDydS41ETCBRSU2oGqudmKA6yPFzZ3aZ6+zMUS4s/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnNZ6CRA9TVsSAnZWagAAEvEP/0P3f4MwcXpa4mDQpLxM\nngZHAo/1yj/cAxmsV9oWVz/zjjXQvsM21DhmXMa8YVzR2gbDGCxUloJ6fgRd\nh2Roctk9lixR1XdHC98bUn15I8Qwm0j2m4vE7369CUQCXJ8DtTmawyD2b3Q5\n3e2iERyvYi1vlPCLGdYUAm90ZVwDN6Nyc/4mr1e36mhBnFv5QDyAT+zMiljG\nwIkLZRjq3B+yIzeUd1ybFPh6mRUGdJHvNZiRVc9ZrcMZI0qqK1pC6tuG6x70\ndF/BD75OTyKRM5fmoQ1lA6XE5S/4BFgzm36f3X5DckarH9/ji2Lc/l6Gq4Dw\n4OxqvSLWKi1LTLoW+BKxZni2ihKNu/lC6gTh1UyPiJ9DxTqDItpRnDtHwaCC\nKZvkXTLnC4I9S4F1QlqZ8D6crG+qhZ5W331tiDHDkRp4+PeZX2QcXunhzk2S\nHuBcv0oK57/CndsOughVL7PbZZO2W2hCnXWHSCXSh1doMbdWDYMcsEbcHBjY\nZAvuenWs7BR1aDy7QTPRo8DmQg1/y9KpEhTOgqY0o6BO5zyTc+V2yRYCU1IT\nYq/KxSXON9+A9BwnuvQbX1n9YTl+OpbvZsDtsBO0/J3gMejZVBCxjo18VN1r\nVzPeK7IjHtFClrqs921MMFS4vPBCUKHjxWQ//siH4nOZMiIudYL6JUlWtsT6\ncpat\r\n=RJUO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.11","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.21","@fluentui/react-theme":"^9.0.0-alpha.11","@fluentui/react-utilities":"^9.0.0-alpha.21","@fluentui/react-shared-contexts":"^9.0.0-alpha.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.2.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.33_1620891257811_0.48549991161466344","host":"s3://npm-registry-packages"}},"9.0.0-alpha.34":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.34","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.34","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"8c20f04e1a681185c616a7d986247632a4d6b26f","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.34.tgz","fileCount":64,"integrity":"sha512-iAsLmuj0x1mopsKJY1tv0Nw5D7UufOEqILpnk2CoCdL7a2Wmcq2VAm2gq3/xjRXk2Q3icoAfAtIvMg/YU8yvPQ==","signatures":[{"sig":"MEQCIEkiyGp1XWJmlavcGTqkFBklqz84whJ99+tgM8pF/H4RAiBm8DsmwevKLnPNQad/gFuV7eJoGyMyz/euLVuX0LLksg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo21nCRA9TVsSAnZWagAAbjAP/RXWfcsw0eoohNv0DJlA\n0yEjUqks0nC45cln+a8d8SveVuALy8p4tcJFQLG6tLcbsVFaV/Tl883K7hNM\n2NR56B8Ip0VGWGA09zgy6O0++5mirjkP1LkZxqTyk2Hnh18EQzBn81AZqczI\nYE4zG/YJVsj0vkyEdi+ybtv4GAwHo+2dNJlAotO1RaD4HIsTmELkbcm5rwJG\nrTXrJ1ir4viyJHwgS18GWZann3rD87t4EeYKp3QcyydiksXh8LfDGhD/CF5G\nEOUsO2DQmHrkDQCK9zNCr7yv2ny4EMZw32h4wfnBOQKYmyC7qkqEA9JrDCAJ\ns0Ug4bjLZa6m2yUqgZzNDQs4XAtyBn1cHhyV9V7mPXeDlgZWklOXinVAYyhe\nsq0eEsklVMjtxuBX9IhkRRKdVu1Qr89q9zVSuFjCPUMj3KDLdYquBwgtG97J\no0R3yo80kIpRNBb7gwvanK3SsvtmW4uLi/6UxTjLBM/Irgn/lHqL4jAcy5ts\niL93QzbaqUnrOQHzDRhiDILbcicpVXcJXv02JzI8dtOyAebbX4AnVvTArgxC\nqlTw+f3FHZ37M6FB07GvvAFWbT0wIQGjG3R3cKitG3PHFxzEZAEN+qXHKo/Q\nIP1GP3Q4UhFYxd+ZfjGGPWOccbeFu07SmzjZg1f7NbQMQbO3Vgy2mCiUu1Zk\nAlac\r\n=GKl5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.22","@fluentui/react-theme":"^9.0.0-alpha.11","@fluentui/react-utilities":"^9.0.0-alpha.21","@fluentui/react-shared-contexts":"^9.0.0-alpha.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.2.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.34_1621323111319_0.8505321638996637","host":"s3://npm-registry-packages"}},"9.0.0-alpha.35":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.35","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.35","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"ae37acf8b2fc16e1f9ee49deb4b155c68d4071e9","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.35.tgz","fileCount":65,"integrity":"sha512-vs4+zYmakblY3+jhtKcnxgQvrMRCNXwNiXM39SQJ3SH1BI4g2XcoPK1ZLDjxbGnPRWBpzyYKumHGHcBS1pFDyw==","signatures":[{"sig":"MEQCID5OkXBz80egdYdNVbahjGfO9mEjHBIfSyPvcy4ICBrOAiAspqb0hxgSs8+UCLcA5vU6w0LaigYFAtYX7cuWqZkB9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":134522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpL7oCRA9TVsSAnZWagAA1CAP/1CsK+cxqlQR2NG/idiU\nkpOjqqnzG5X8XFPu/MwA9xV2PetOiQntLLezuyrdXlgy5MjCXsPxGcgs2vsJ\nyGarQnn8b8PaZmxNbR3+/UrGpNBC3791IN+REJJMY1BJ13HKL/frdzGMwYVO\nOPFOcpuPrB/zbScGKqOOphC7C+/D6fJcj/E1rYJ5WUAGgos86Mk0yHuFsXpM\nRBFk1gr5AC6cU08TaAJxXB+Qy73mZoXWYoFer8PJby3O9DkKBHqJtLDH4DgF\n2huwZ3umgtlU4RJBgrzBL7XBsY9nNjIAfV7MAVe2gY+b+5wjGiZhZgTDet5z\nXNrhToddPhuAMEn7JJ0ZxrKxKs2jNUP4jN+aLZrZBc4LYJfQNkoqkUt5dcwH\nOLd4qC01bze0fzL4uwodZyUbO5RVQc4YP2rvg9WdrYpIKM9NsW8M4F+JVY3H\n3Kp5nDRcj+Fu6/KVg40elL0dHAb7vkuwmeptgmG579uv5k4Js6wJM/AVqLxP\n1fsm9cmUiKPd8PRotEFTfpeV/TEmLbCyHEhf+vdmWsaLSe7jfg3TuuZMnwE5\nnRqu4VIR9tLaqt+DZka7jWMA8Q5tiNRYB8cpQRgsHMMhyuYpfFOFnugTdrCT\nVLq3SXYBPCEl57vt8Z6S8SmMme7rnK18zc3xQ4GlEUPdWLqtP3tH2XgM6Qt0\n/QGu\r\n=oyFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.23","@fluentui/react-theme":"^9.0.0-alpha.12","@fluentui/react-utilities":"^9.0.0-alpha.22","@fluentui/react-shared-contexts":"^9.0.0-alpha.11"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.2.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.35_1621409512289_0.4398443745316847","host":"s3://npm-registry-packages"}},"9.0.0-alpha.36":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.36","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.36","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"6a7fce411ccca860fc42a382723789f8cdf9cc89","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.36.tgz","fileCount":65,"integrity":"sha512-CvgTL5N8tsaYr6rFn3OSVL92BpwNQJ5XEXAkvWYVc/1eiwtYXI8j8Dgd3Y2JYpyg5rIwqf8iN2C7e0sON4RT7w==","signatures":[{"sig":"MEYCIQCl0FybywjGoinR1x9PWT8/JsFUDwgPbleDMQazfiBrqwIhAMQ2S7AyaXbvJDNGZK4vbCiGMn8DV29BidBphE33ImcQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgphGJCRA9TVsSAnZWagAABUMP/0gViaWYKS6BLRBuJIEH\nCehxbbf9KWpHxK9u9EKnIhknDy0R6/5EjCY5TEI2z9EP/sprkJFQHGB9BMGU\nGAj23w7FpUxujBBwKRgRHo8Pi4x0IOKJij6zYymrZ8Q2MrouTNhz4CpUM68M\nQG7RDH0zykqn81QISzZArc47jdIIGonvvnoXwgSxWVCpAwJq9vDz4L3/9TnE\nY1oij31NwtuekG2bi4kvt5bm3eDy+alyaEjvqgI3V/5ZaZDze3F+Dqh7RcC6\n7i+RvlcrOZ9XHYGnz5Ui8WjWxMvU4XWoEoNKOnjxNRVbR+CvbXoK0emRL4tL\nhd6zvk5OISqJM7m5yAYYSHGELkZrODZN8FOy6jl2Q1Fi2x5VLe6/AlTodUiv\nWQs7m18nLcmFeqhqV68yKWfFvaNyHmy0g2btKAUXxPX9ZJTWBl2kPd4a7fzb\nSf0+Z9RxmDM0qjoaL1vzGRhQ+GD0YXHenxix8hFAdkzGUdiYrfnUVNuA4zQE\n4PR6eXCkZuYSrY+90f9H5i15JeaEIMYFBgr5prFhJjWqrYVlYuNQ1YrfbGZx\n0F0I1eoXjDCM5aexvLqgfFvNQOawKwOB2LjpenVnXehcXoiHuo6c39/VLwbU\njGGEOZa6DckxZRq/7GAEEyX09/85BkiWlXekl8ifheSdlcZ2WN2ieBT+qs2t\nmjrx\r\n=h9o/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.24","@fluentui/react-theme":"^9.0.0-alpha.13","@fluentui/react-utilities":"^9.0.0-alpha.23","@fluentui/react-shared-contexts":"^9.0.0-alpha.12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.36_1621496201408_0.2810624392931784","host":"s3://npm-registry-packages"}},"9.0.0-alpha.37":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.37","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.37","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"fe97552ec7579572efd325fcade61a2456391b2e","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.37.tgz","fileCount":65,"integrity":"sha512-kCTDBPUVGZI4xL6PbS4S3+3YwOwHHwv/ulP4/CABJ9MKW66ZWm3y46PuMlX+ZiuBkFufa9iNNJgXomvk78ggsA==","signatures":[{"sig":"MEUCICHCqEjcByiCEZa1GEGdTeJsuStLZdEyIShoB2LmcOUOAiEA3Ra7SEAKW/tZXQdGR1EK11S1pg9FodSqTOEr2CW/z2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgp2HiCRA9TVsSAnZWagAAngIP/3d2WvHZL+qrCK8HCfbK\nNEoD977KEs0W8KPOjOjHIGwhSk4LheTK1tA8qRPAE8M7zkYqOHiPQA4lxNLY\nh39cMwXrS60oT1BEh97jP1dtspHUJ+4AbYitcpbUnGzTnD/hrz9PlOUsybJu\n7DvQFVUaHOoJI98GaxDAmDw6mwa2UGQUGAS+4fEdUTQZlvN1D8zlmL+1FYVG\nJmRmIXM2QX06by8FYcQqRCKEWrFPfgYWNzNWI8WUA1zbxnS9cYVjvmJ7OKkw\nufDoOhB52Xai+f0tAWYRud3X4jCg0EBKw8esKWC7Ywr8Kk9YtCDJW2rk2z+I\nqO9BXPhayQc9v9tIhA45dLqg6p5tdhE9ZNFHF3LkraIo8hfFdCRsfbsOKW+n\ntKaAoO2pY52EeO+Y1yyTin9rIPP5y984Zoy6VniA5Rpyhv0JBbeHMXNmmYen\nv6G4C4tsxnuTRHB+/6hX83tiBaopgnbTxVVjwdTagWOApA1jYvA4b9CuCli+\nCkzG4UTPp2P0KdEgnlwdx37ZSaMrjvC1kuPil9qLorP+k/pMFdhaFDAZp2AU\n/9+dBxS7HwaAM0wQ0rZ8mdESWiJ7Tj5/A3izbt6ynXiED/YQYcBRCDyS9Ul+\ngKY59cVGzkiH3m+Z3qWS+8AFoVXkpS4KnUkUoY4gxN96d+SPwbs/svGGKL0V\nOk6L\r\n=74mb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.24","@fluentui/react-theme":"^9.0.0-alpha.13","@fluentui/react-utilities":"^9.0.0-alpha.24","@fluentui/react-shared-contexts":"^9.0.0-alpha.12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.37_1621582305949_0.09581185003882942","host":"s3://npm-registry-packages"}},"9.0.0-alpha.38":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.38","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.38","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"cd9c1882b83e91f5cfa29a9fa6a33c40a0280c0d","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.38.tgz","fileCount":68,"integrity":"sha512-WccGk7KL230GJVNcLiQRN9AfD8M7fSCNGhghM1xksq938oju+CSMAaMhASyX2Dly03OOb+6Ll0s8kJ3SaYDijw==","signatures":[{"sig":"MEQCIG90AfN/XX0KjXxkGW7Gs4A9xxYvMuELyYWYZblsYIsPAiBYIauy699dgKAYbEcG0qxf13flZScHUC7CPftEmi2YeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrfmlCRA9TVsSAnZWagAAqsUQAIeNbpLOGbZtx/cMeK+W\nokgkHAj0RzXVc0zOisCkReZz3aRQmQman5CWvtOPqxF424xvg67bg2dHNegc\nFCHPS0R4fWa9d3vMm1wPdnJy0qX5v2IB7I3fNSK1xDfI9ULqYefyv/1DoMrG\nL8KTXbe7suPXbYQWiiPIVb5zoUkrlJ3gsn9abka12YKMYOBzm5XjHoImckcK\nG4koeaaXLR85z/3ajyWLGlAA9mDAXnNHcXuQTmKomBFjswyuXIOaeuh+9a5+\nvjylzdSa89g3XbmM8f2IvpFh2GoWVfxfUwgtgVbn3W2qbBKbgBzHzkrexLqY\nEfnCCfdVK18ZkXwgTebnhlP5oufdmBryaRNuIfglT0p16phOBxPvK632xDgz\ndAjg3YXGD2AH6PDbTEljkYRDQAeFxqkR8utGI8kuU0Z1mx1QoEK4D/NrVDXb\nzCV4MwOOcUZ/XqyONmy8rhQTTWg3MpKtlFdYzzPbf0NC7b6oMsbXjSL/1RmP\n5IFEyJWjKSkoIPAm1dNs7a3X/YaaNKIkNGNMduW8zbwNFCvW90htUAvxoVFB\nsX42FASxnKZzFhy5DtzpONlCB5txSBOHK3XZjnYZuDFhPPrTXFrwhbXaG6+8\nAF5jIGRg9jTUt+X8PnvjheS4MdsPs+3OsSOt/es2cn/5rszOXlugBskcebd2\nzU9o\r\n=/msQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.24","@fluentui/react-theme":"^9.0.0-alpha.13","@fluentui/react-utilities":"^9.0.0-alpha.25","@fluentui/react-shared-contexts":"^9.0.0-alpha.12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.38_1622014372983_0.2164067845902684","host":"s3://npm-registry-packages"}},"9.0.0-alpha.39":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.39","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.39","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"1e990ffd3bf53c0f1d320fc7de9c9b6e3e4b7f32","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.39.tgz","fileCount":68,"integrity":"sha512-OhZEZWVRCoZ1Xfs0RosU17psA0HS3RJ1xXC4CmcFH41zBuIvyPFUMYNshsc7IVKETcSSa7YwNrwUDXoz09cJxA==","signatures":[{"sig":"MEUCIQCZmLm4gtT5VK7nsGjdy53KRoCVKFs+Xnfhy58l31JnVAIgPugPuloBh/30zBY8yk0gRIPxA8yj8YDuZfchqDKIEWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguIYCCRA9TVsSAnZWagAASG0P/R4r1C6CqHxA83WIi41K\ng3HvQ1SMGlG/GD+eM3YIPuBaKWf69DT+FoCXJciqzewlvGl47+tIkG2NmVKu\n5zfjrrCeEvrLikfExqYLLvBrXs6S6wmXH9VW7pDX4WKNXMIgEAMU7C6aISTT\nGncIKnYLJGlkubmW3kgGMmlLI4Okc83V36qkNu0W0C6lvsFusTepz4iB60J9\nypz4FlYhRg30qG3i3laRjn5bjxU0ecs0SEikp5bLGW3E9TRhuY8y45Pv2Wrq\nGmsloXIChsAdYU/ph4b2YkOwwT05zTr7T9oar2GLHFG3NSYyfJR7KVHks3Wr\nVYST04tY1yg9XKbXFPoTczxC1EjE7TMUbFgdRyvFaOakeh4ECB5nSUNuDpr6\n+0ekVK3ZgvEKXkhzBgGJ1N1OSLTJCZ8iG3rIl46zsK1QskFAqKb51aow9WkM\nDG0aYrAIJDvfre7hZbRjf0UJC6ppT2tvr0GXP7jGsnmcyIiwh5lLK5Fy10Zd\nwn3YqmulIrNnfbEf2Rk55k2woKeeBKANgSe45FPc/TyF9faqfmuXPlrrIGpx\nbqONFBrO3AAmh1jE7y0kkdtfOfApQ3w+xYzcqLpE4gnMWo8JDpMqeMB02rwD\n+E3F04wKhcE7KGgBH/Kq7Sl068GKvt6XlA71kJN3uLTrzDP++AnnO+58UfFE\nBR4V\r\n=bl2M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.24","@fluentui/react-theme":"^9.0.0-alpha.14","@fluentui/react-utilities":"^9.0.0-alpha.26","@fluentui/react-shared-contexts":"^9.0.0-alpha.13"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.39_1622705666218_0.6873107824719291","host":"s3://npm-registry-packages"}},"9.0.0-alpha.40":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.40","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.40","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"565f2f96b0c79ab194efdeb9ba1fbe5eb1747002","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.40.tgz","fileCount":68,"integrity":"sha512-dYG8ddaV0hjYEULKIWlQlc450HEKzZbBqiPtYppXu+TAKhmarTL4lVzTNxatPW/31L/rTn5ciZS+WNyF2uLT0w==","signatures":[{"sig":"MEUCIGYn+angzGFj10xemtpP60MkHwsDg4eF/Mwqf2svpal/AiEA9/IlV+ov482O65ZOS6ioPmqupdnxGeBelGJLgkxhkX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":146510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgudd2CRA9TVsSAnZWagAAbQYP+gJyFwWUrjgT7rXP7/X4\nm7oEDQamGPJLWhLzVfDYHfZR5TtcLiHaRrFXGXG4lZ/zqvOwcrMMunX7Hwos\nILCmH9UbCTekhHQ+OWmhOgBV2BI+XoeA3TxsU/4+QGvPFyE64FLY6ZZMw5NY\nvavWZEtNtbTgRbkSU4nPEw5sk66DE8FVKi5xKKSu0fDKjSEpHsBOTXx7sT84\nxjp9kOhdUQjZYkvD5L2Jd3f2wIcphT9qCFQ92/i0FLIuAYXwNn3XUWnCGVM2\nJBH3EC48y3b20v9GDer4xtDOC5KSwwaWUkIJGsa+AG16wZ6yoWIeqpACUA17\nFv/GzvzhT8cT8kt5UWxPD2lwE2vkyVEnxO8A07qWz51bj7wIY4zs+/Gd+UVi\nwl+pa875sOlsgUI9cXeTchDCCPdswuZQtPoTKhd0hxhdLs/j0/9aYKHQybw8\nnLEy4vQu4/ucuGodJ5gMvETYY17hl1i58dusMu6gqVaufZMB6XjtfU6zpK8/\nAmbLQo6rfSYq4B/84675jlAenMmOQXT22MDiO11A/mjHRl3GE9/tdJj8P7Ex\nTy4+XRyVu+NHCiz1uW+cnD6dr5O7+nF68U7C8QLJ6s8ooOAnkSa3rn+MYVXa\n7hUdVOlyXqjoXuI92mqrCfPgU2Pqi6lfTrDuv1UEUP2tTHv5HqPjTDe2W1Hc\nt6UC\r\n=iOb+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.24","@fluentui/react-theme":"^9.0.0-alpha.14","@fluentui/react-utilities":"^9.0.0-alpha.27","@fluentui/react-shared-contexts":"^9.0.0-alpha.14"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.40_1622792054001_0.37422419506941984","host":"s3://npm-registry-packages"}},"9.0.0-alpha.41":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.41","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.41","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b7959bf2f0ee0d67f4cd6d252b8bba8857680fb8","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.41.tgz","fileCount":68,"integrity":"sha512-MSgHRekQnBjxCPlroJH0whLMzH08G8kC/C4FKs2QP4aPt6m0dZNhl4sSbfh2vTmMeXWUISMg7AYheRL5q7o5lQ==","signatures":[{"sig":"MEQCIG4IrcnkmlzTRVqdQUBQi2HigjhC8FCfQs0szNxRYuwFAiAtGh+OJ4DNbvX7eg/WpyqtmQRFWSf4myicxcfkEA7U8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvcvZCRA9TVsSAnZWagAA3VgP/14eJ3Zb7sloH5BdRDpy\n2xiuwiIn/bvZutXJKXmdgLzFFxKYzit20p5I+WOXQ/9OAOj8nsMoLmW7Z+CM\nIUR0RZ2GXhYyeC9bN+lKC2QhD6uM0ivyiFoZ7aRSIIKijKiWfymHB882g6Sh\nrNzQQv/pCowyaQ5lXu82RZuSERJE4x06wqX1f5+CBGP0O9YRfAAczcIx+Ng1\n4RA712dlnowKOL3Lccs1t8bKszJIbvBgGiwYm2VhVixGpQxtZAhjEdWGfd1/\nLxvxyw5Ro+3112NjDgGfnMAmic9sZt69Xf0+zOgPWAnGaY8sK4V9irJu5C7A\nFySnbORGOvRQPdyFDUMp62yAOHU3BYB8UoHAFSfX+AJn8ihWEHc8l2CYyOnl\neOQ8Z2HXnkfshEOfYf94T/1RLGcwCnlldOzDKHFKFrKGGCCJmqA/egW9zA88\nMb7guJrF5PUWoJdBjaDpbQgO7MqjaLGM+cyxYYXXKYqvGDb0jne3+uY/BaaB\nLqA/ZuMsNZ78F6fp+GbhafRcIBu6nS+Hu+xWRA67drw5cw7y72J+afmvjmIr\nYUapLhc7XUJeUAf/gUem3XXDeQHtkHtgdwzhX1B1gKmqWb+hhnngOAydZJCo\nM0zQ1CNOGxDkNEtVZHtXu8JfN+kBJE1sQK6Am46ULrg9SjdSsVMmq+NMEYoZ\nWAq2\r\n=ORH4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.25","@fluentui/react-theme":"^9.0.0-alpha.15","@fluentui/react-utilities":"^9.0.0-alpha.28","@fluentui/react-shared-contexts":"^9.0.0-alpha.15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.41_1623051225095_0.681774525005292","host":"s3://npm-registry-packages"}},"9.0.0-alpha.42":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.42","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.42","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"24cd8d109705654c6f52a4af6c72b92466653e68","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.42.tgz","fileCount":68,"integrity":"sha512-cJWhXXE78S2cOH0aJYz9193ypO82sKylz/9i1Lkx2m8+3ROWlA/T3ibbtzHb07ULPLOSUQ+K9JMurprdvArrwQ==","signatures":[{"sig":"MEQCIEzzvfbjEuo9s/iQcTflqWg0UHiC8z9o2pVFo/zGq9A6AiB6/mzYRXvzHF5+JubGdfmNUSy5iEImoD3qFgoT7zneSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyFh8CRA9TVsSAnZWagAA+EIP/Rs62vV2NlCwTFMKge9w\nhXrs4o9EVU7H5FEWRqmPLhXLnKavnw2vM8wpj6Of1CQr48JSgwHxNv2GE45z\nEehnGTqMA4wLtfqnnPsGuSKW/NxIBJBqjr7kjUbYdr2FvhLATBP0F7EIUwLD\nW+PqqOq5hL20z9IgZRp7+SX3gXZq3bWZimxBTPEDUsL3j5dD4pfC/LHB0LG6\n7D3GD/JLIccegFhFBWy/whiAPP+s0xUV5p95qAGYcRMbMCSrsKDoxm5/0qp7\nizVUNgheashSygg65KxsGcOtMno+I1YRcB2fazEdmOztqtYvHPS6myZdnICf\nhgAO0IZqJH14HkpqkJC5sZsGZoMEiK1nhlct4tIOBf6M+Eo22qqmI8MFL0Dn\nfgFIXkH4KbsIrba9E0jC5cRfluIehVSvrO0TXduQjF5t/BnEhQ39qyDCayVN\nJ7cGEfShj0lIZOsNfHXj0UCVJ4+8wpA1ytLZL5tJVbReAg+B+cm/oX6WbBxv\nSX/6yuLQeAYbJNJ1Gfd/7rfZ+d8RP+eSAve5ZRjF/mQVGsTmzL6kkJtvGscn\njPlvuFKFI42tP03+o62xaJlffPrfEkH5QkTczMKX27WkxXR+uSel3XylLKQi\nV3/quUQTx+CRJ84QhCICBfrWNb5fpikhwZIMPbZLW4uYSuYZp7zK23knbvtA\nF8eE\r\n=zbQ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.25","@fluentui/react-theme":"^9.0.0-alpha.15","@fluentui/react-utilities":"^9.0.0-alpha.29","@fluentui/react-shared-contexts":"^9.0.0-alpha.15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.42_1623742588288_0.8235730166137598","host":"s3://npm-registry-packages"}},"9.0.0-alpha.43":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.43","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.43","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"0d51d0c69852d19102cf244ff4377a9461fba123","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.43.tgz","fileCount":68,"integrity":"sha512-b4xtFwISiCjzwlTFLhXy2f+Ye3Rl3NKKXl7Z4N95OGc5ZQ6aqkiipioMo5e0Fp0WD1glq8CF2lcWQkJUTzyQbA==","signatures":[{"sig":"MEUCICUOxbx0p86f2QBmlPoLsgaIjTze7fW//FQoaY+5zMtSAiEAre9SvsGHxE8CSBpjOnSqLcuwskQzNR7S6zZU1SLrblQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":142233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2swECRA9TVsSAnZWagAA7ToQAI2izQreFMWYHsC5cjpg\nuh2Z0UNsXOsYzdd1Rtf4kAtjEm4+qQUzaT6NpSC/bADFhXp6f+uJZEm7+t8s\nHLaxhT24ke+iG9V9NmOFodom8HjCLWYbStrKEGiaQWoPVTdsDCEOBav2ORRH\n0mzP0+ODnSXM/fmgsFmKertPFIdgELiRHCn0rVAS3c2gQweQ4eEuSyhnzADu\nQedMPSHE20yzSOi8qlPQ3IT3Xwi/trZX6e3dV7rmp9RuP8XCsBERbbRLX4ET\nA0rx3sJove6EVVfzQV2JXUtIIvKpprC72tS6CWSx20sfHjwNhjuce4UJNgYi\n9v5dAXIatflss37BvRvWtxvvtlBdGSo5k8cFq7msB1dhJdWuzeoe9auZwuf/\n2nHjhp5//inE0RT9+GnlMZ6XUvWVeTzTKAuyZdyOMrwo+XvNxK95xltTqKB0\nQwSNujSJ5CNo2If4bjnHXvzzPkgQOnLoM7qSGk8cq6Mgqjzwp6KZH0ACa6LG\nITlj9m/vEpDeNjVWp3twCzh50Z7CWt37JD1l/7p/T15Ei2pwOE5yJcvforvL\nGj4gPbiVDEsYoVgbe3/Bv4uaT7+6YIo0NOhRKC/4sc4kl7jati+BlbVZB8KE\nqQbZZN+VQwHywEBrsS+fXmQ64MhhuLu4L4jv8h6sMSMnvz0lHza9J5MC+DzZ\n+uLx\r\n=DUkR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start":"just-scripts dev:storybook","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.26","@fluentui/react-theme":"^9.0.0-alpha.15","@fluentui/react-utilities":"^9.0.0-alpha.29","@fluentui/react-shared-contexts":"^9.0.0-alpha.15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.43_1624951812112_0.09552592115047354","host":"s3://npm-registry-packages"}},"9.0.0-alpha.44":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.44","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.44","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"36e2794c2982e6bf378ad2f7083961948c223eab","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.44.tgz","fileCount":363,"integrity":"sha512-tCWnXd1xN7rc3Wxz9oJVdfCmPhDmIgLOCJg0A2vIfsbbq3VkOoBn2bMV2G1zaesNjhzJVLJ47AfIYnatWFKGCA==","signatures":[{"sig":"MEQCIFTvr82HbrqvewkKyDMhPosdpXPSlTl59bkZbiqO1TGGAiBJNYf2yeTRcFK2aSF6UHlqUX2drXs1hCdrrSybQLQ++A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3B7eCRA9TVsSAnZWagAA+zwP+QCFFINLJx3wD5VBOkSo\nRUwmEIqT9aHGZxPQja5EXNSgEV0fDs86E4bZNIVz/t3aSoFxMsK1xhtCaHb7\n3HOwwn2XGXBE6bp+yY41Y6FQetYCLEkW7NHWbRiCpzZY5Pt88hDfdABPp31Y\nQYz1PeOgGAwyCc2TAVu/00pyq1jqFV6IsHtu0lYChFaeIi3cURoAY5ccfEkr\nYGpfl4CIKSFJ057zuPWEGFzmz3q8q/HH3hV3rbaZVV5dPefpjSm4fHfvlsPw\nx5bkLEgrfrWFmAKwpwLlx26FHyMKFh1pnddbdCbp1zTgwea6u0jM1+zR1eFx\nilZC6HIutPjeowbn1rA1EvqxtiDNJwCgEUBw9mFXAjtsJVxIIjTOoquIORwR\naellpvgXajGB8LQdtuYC0TcRGeEVm972DIP9N4n0ZmF5y+rz3KCx2BnlLsp6\n3X4V7PAqSite4vsN67jgC77bCkBPr6WyRIKEmtKBF6WEtf4ULOC2Lmc8tLjf\nug4zYUUb+0zctu5+OXw8yYZogpoO3NuWtoWnxz65CZLq0HU5AXsTaJ/yUFg3\nbWKNUaw414AQRxDZfGBGCmXE30RmwYlXGx+mbO4j6rnmKGzMcoRyrb4d6xCl\np2KqMku+QsRVwia6VztsFP+4/ke2Ai+6De30qBAOGGdd/ae98qiRV/Gzc1Ko\nqeap\r\n=62oF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.26","@fluentui/react-theme":"^9.0.0-alpha.15","@fluentui/react-utilities":"^9.0.0-alpha.29","@fluentui/react-shared-contexts":"^9.0.0-alpha.15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.44_1625038558192_0.8951747481665844","host":"s3://npm-registry-packages"}},"9.0.0-alpha.45":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.45","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.45","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"160564677922ea1860a1e69ed04a15fe297f8cfe","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.45.tgz","fileCount":363,"integrity":"sha512-JmO1CZ3GSmGeG9nqqu98KccHpC3GBMqDlVrxKvfXBKIXZdcPwl6vmzf5wUkqyI/1y/agnT2gFVxWlZwvW3bbRg==","signatures":[{"sig":"MEUCICpYIdHu2GyfX1W55T95+4VMuJFbG+wbHoeH1WKARMpDAiEAov3SwaJ5soqWf+/2pSDt2OKQhkesijoNq2I5tNsET3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1315223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3sG9CRA9TVsSAnZWagAAmI4P/0jB/PITLi64KPe7MC0U\na7vY+dTgI8xkwyGZwAQlLfUdT9KybGhxdeF6c8C+iTPkUjnWZLem2duEwrmP\nkwOtxcleQMbPAq/CqG/ikffZPm8eRhhWUUoonjTQeMs17I3GRY5TrJgESnr0\nG98ddKHXaYi1Qb+YaDHXGHhxMvs6StrFQOVp/9uZgkrE+YcuVd1Sv56Hg1jg\nY5HUmtjMuCNA8gy+g0yqaVvbLLcRlzLro9/ip0foFIbVaW9YyyFj3O8p1W61\n4vW509jBP5NUlISsxW/FL+P/5fOnWQ/r9VZ/+txoiPoHmwjU+f06f/CdXpjk\n+DZND85bx2QlXD8WB2XoAQvQ/w6ZgR8HH4SOZxUK3RpYgL6cm7Z9xVv3x2NO\nmMptJ1vS3MuysoOkBoRKnzUPhdBlDmuLhIFgUuND+hgxl3Hy7rSUZrAo8Cho\nL5wwITDDtHMm2jFmh1+c4631tjN6ta8AifxHHBUKeRY1hTK6FCb80dlS5QHF\nyLk9wi0xyVBBIrEgdIxjrT0etEVTD/wofpWEi8qM5YSWoYpXZOk17uZCkecS\nkj4U8CD9x3BDAHVU8PXr7P4P9+8NDiwaT43S4KWpFL3GetMSwmdxlnhOulVd\nrt0dJ5YUggKaiCj48jUswDZrXWKP45VK1UUww6wVJKmA30Hc2PVQcWIAh4Nz\nSFXv\r\n=ln+g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.26","@fluentui/react-theme":"^9.0.0-alpha.16","@fluentui/react-utilities":"^9.0.0-alpha.30","@fluentui/react-shared-contexts":"^9.0.0-alpha.16"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.45_1625211324865_0.11070893188669761","host":"s3://npm-registry-packages"}},"9.0.0-alpha.46":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.46","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.46","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"7bcd8be4146c09dbdce69a0cde6237a5b3160c2d","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.46.tgz","fileCount":369,"integrity":"sha512-NHt+tXy0/SgyQp4q0KrzfwwSV9RVlma9WI0DN2IT7szMuyPwrc8PbSeKjnpp4PwqHOD57eYs9F//XlfSOmJqAQ==","signatures":[{"sig":"MEQCICgSd3edlWNMZypisEFiYp2nFOLaHqFZdQSBmWqMyLKDAiBOCSdUqjxsmEDFLhK8zULhOFz8csq1wGB62xbvmiR8Fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1362045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3518CRA9TVsSAnZWagAA1sYP/Rhx2Ups/yyEZIRgxrJs\noWL1Khsx2Nl+nGlcuoo5cnvpKFr0dgu268x/clCExgQLwqZQCqZeEGtF7yj5\nGbwbidlke4G5h0GTJ0GYTpjf9qXtHchBrm+Ll2Oyf7Nlp1Klu3rVMKa6oVqE\n/IlW6GSYbn2xQe5i/p/eNCl8+TNU0nGRYHgSFqhLa7EZ49koyi4oql5BnCkG\nIaKYcF1LJt4Fo6etC3rNSaoNU45q24n6T//r/BmLe3RlnFCe9chXzxHy7e16\nkbXZuW4YPm8wknLU5QSxYBWtsySnJaoDETza5zKH5fPmwX9B8VZ7Ava8PV2y\n2koit6QewbX14xLQM9PtpC5iObqO96Ejg9I/sziBNz32qhkq18AZrRNa4ABB\n8Nu5Be+vJ2vMYJ8846pmDMbxiYCJHucGkjHYujVS8Q9mQlxlvaDBjT7PM0Wv\n7OdFgSBL1BuG3p6pkhygGLk8CTdLzTB5NKa3rBOhx23T1uRVl8+8vbmTAvN8\nq93AJvyECFu4MzJYpcrHmU3Dnl5POqJK6gGmCZlNOZXSvPYPUo2LI568jrOS\nJKMk6xulElmfjtWUZhnFenmcqaPfuKc9mM+N/Vj7zuswuqQoPVxu8eq3+bTY\n9GZVx389NYtPtty0F3aTNRYFXIxZ4mIBtQ5kkI2FkASRiUYnkptpRXV6ie8R\n/jqT\r\n=qdfs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.26","@fluentui/react-theme":"^9.0.0-alpha.16","@fluentui/react-utilities":"^9.0.0-alpha.31","@fluentui/react-shared-contexts":"^9.0.0-alpha.16"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.46_1625267580064_0.4420703230946199","host":"s3://npm-registry-packages"}},"9.0.0-alpha.47":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.47","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.47","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b201bf63569b6b3d30aba60068320dbd353250d6","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.47.tgz","fileCount":369,"integrity":"sha512-/r8WD+QJ1BpyNx/IuAUW6ITMsedmlueDJYKLfK3dnk2EFMTaFB8vbF4eFXA5WSP4qkR57PnUaToBrE/3ssfiBA==","signatures":[{"sig":"MEQCIBTHcDJa3KCSlMMrajPIsIz1el2F6wAGIXrtvifbZdy1AiATw5bj/fgq2Hw8b2aDZ4Nqq+DHTktlNP7o7HsQuR8Yuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1363152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5/wPCRA9TVsSAnZWagAAw28QAI42KDIZjnqrVMBnWKeI\nMytF6oejsq1aIsjfc5XowlO+9RupavJNDx+SL7XzFgGZ/VEVPdl9LVYhGP9a\nv8vNguOkG/AFpSYgImwerG2McxPJAFu6s2HvJhg1e7TheyejQtve19iqOsI7\nU6iMtxAyciyuIZ3lG73cNqo1H2MMsmTkkSA/EU1GiXSoQdcSleJYKXHEi7bQ\nMS8ApNyZl+tylSIhXsErJq4Txj9bSfeaTg2nArhszoigTa5TlAZtz/An18S0\nWiW9S1WC4mJWOpzUzw3C3gtxH9ApxNGSi53OHTjD+ik2X1yFHSrjNqRH20Z5\nlbUPuvIAyGWSz+BdNEDVVkcAl9jwMGTS5HyVbd/W8mJv25tSww5PQ0W89I+3\nEs1j/7xbGemPmlZiV69Bi+vua1HrISb04ekABKmpakAb03vS+er8otnExeLK\nIJvvYgMIaheaIZ5jSRK/Rcb7eXTJafOnc2qjMzaRjG8CAy9vlrw/9lbiqGTa\nJ6NaG4YiGb1uFyH1+IV6mxTsbK/3a8MbsC95xRMJbb266XTUlICoZlol+zGR\nC6GUPM0NLFB1Hd+BMtI1ckTANUw5tbF5KkyOtGrCxS0vSPu03HD3nUFkcCQA\nsv2GELJ8/rov8NeOQ8gmEnopGhkspbKqfJ3RN5gG8Z+zUa/YNogVW+xN2YzO\nuv2j\r\n=iQfa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.27","@fluentui/react-theme":"^9.0.0-alpha.17","@fluentui/react-utilities":"^9.0.0-alpha.32","@fluentui/react-shared-contexts":"^9.0.0-alpha.17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.47_1625816078856_0.6100381289912096","host":"s3://npm-registry-packages"}},"9.0.0-alpha.48":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.48","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.48","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"32d58f08e7e2064b5ef8b3ad5053282d361f47c2","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.48.tgz","fileCount":369,"integrity":"sha512-TQOAZSryCKUqq3BiLzu2EWUdeX/TS4rKOVuDhoFZ/A5OWQD4Xp515OYG1WTKzLcvdVOp1PXu/Fk3GVLuCMHL8Q==","signatures":[{"sig":"MEUCIQCSbFr6ahQpSWVKovfbE/NdUG2ysZFUGqZPCPIntjiqEAIgARG77parmrw90fETXXVK2QVWyrdZAsNcWLlM8NaSCqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1364385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7UGHCRA9TVsSAnZWagAA2U4QAJle3ooabFQfTaWm3uJX\n3ZmR3iQ5b3XnRnHwDtaCYwi/ztClH/oSTf+jurRw2LQZRzKdc/c4Ku9yCvWd\nJTLtgyxIDJU+zKf+NC/SO7X3M34l5OKRwVdX4bigjeURYWTRQklYKfAHxiO0\nqVelAgUdjGGh6yI3uzBAUtEAfkRHPnLqaBtzNMSx18u4kIyg5RAVy7TwFlmD\nnUDTmRG9oqcgDKNqrI8EJpgW/NKSgmgctj3X0SGo8XvNtwB/bEBykDOfMj1K\nPeMPIGReDk8wAdzq9+29zfIcph+dF/SKpxY5vO3HS7FgZq7jj1b0UmEkY+ks\n2XT+7FrtEDtbR4Vu1WKHTf0daN5KbFwtPchlMhHC5blbj+CjTWlbSlNXyuay\ncce9IcdhuSdbfTtvpZcet+G1ItWQCU6Zw6hjiqIRfZYUi9RzkM8oOwU86O5M\nr/lBvFJyL+Xt8YwlHSCyeS7o9Or/OYn7T/f5AALDkj+nzaiwtnxhuB17fp13\n+jtqZ2Ea1uarXX40MBIuPFyPadgPV/mflh21tvVt6fplIekV2vy6LZKuffW+\nEDm7HxOZtsTlXfpcNCMgAiP6vtFfCo7+XdROJfvDKZRD3xEVUU5kKrnFSkZ4\nt39TyrmfeL7+ppisVtTYUCXR+AGe3bD4nFD7GFmL5Xk0lWHJIlmpWGjKrtce\npqZU\r\n=wYjW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.28","@fluentui/react-theme":"^9.0.0-alpha.17","@fluentui/react-utilities":"^9.0.0-alpha.32","@fluentui/react-shared-contexts":"^9.0.0-alpha.17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.48_1626161542720_0.3029809469256506","host":"s3://npm-registry-packages"}},"9.0.0-alpha.49":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.49","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.49","maintainers":[{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3ed856153087f3bf74b6db00923d287c5b297c33","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.49.tgz","fileCount":372,"integrity":"sha512-FDXNDTCB+jBzAOrQ/SZqd9rWdL4UgyBy3m1HUM2v91Btp7SlXemK7RYMF3th9SFNcKz3MCbJ+L3UYJXKfF/iKw==","signatures":[{"sig":"MEQCIARdNLT5i2hrV6Le41dMezYvoHxRhlE2j1cZ3akhfHk8AiAGkKn6q8UThnatV7LzOq/v+DhtXZ8bu+ldKLG2kTV2LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1395362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7+S9CRA9TVsSAnZWagAAJsgP/2c+9UwMnw0W2iTx+D/h\nvGcUbkv9fqtMu33CZOSnFgXLWnzu2qPhRTH3nUtNRBZDyybQ93INEB2JbV+l\nnzssu8Dte3XNcHtgW4Hx4gBo5nRD1dDIh/Tj6zsQqF9dzQd8y1V5RwJHSI3D\nVfExPANHRbu+Ir1142rbHiS4ddLX8ipbjB5DDi9Tmz4tHqvbcJl+2Ew59QOT\nGUkTsD87y5ZBt/iaZ6elXhpqZF/bRhmrJxKlC1RVpHtY0kledvwKNNbLTtm4\n9cgHebLMgx2Umc+hP6TmoHCVXp4GKd77heCmLjiYBn5c7/34WjWJ3Yq//bS7\n+o4aXG3WqlbJsE+/AXujaAmIT65VxpvOGG6/XbX05uI4jmokn3AxpT0DMjx5\nLCOKuvpucNQQF8KZ8ck0xshb4z8OdLbqzVlo7IfUp/jzQ0L4QC6qdZsb6aJc\ne1Ft8R1hDlQv1nXGiwzOqsHxlFwadzraBE/RBxPKgp9+5WLbW2qyB0ifn7zV\n/Xm1H0gzCPxAepQ08e4MSs/QR80CQqoa/vtdpvpTfalEhI8DbyqcKzAQxIWF\nEtSxuxWbNLRfAeixUW5i3Bz42JfMoRIYcU0jA6DrAOH+3/y+MkpG04g8bFE2\nB3lhgw7cqRzWAhfw7OukaJDAAHxDlpESM9IRy7LchwX3cUdVWwyNJD291c0L\nb2pi\r\n=VxUm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.28","@fluentui/react-theme":"^9.0.0-alpha.17","@fluentui/react-utilities":"^9.0.0-alpha.33","@fluentui/react-shared-contexts":"^9.0.0-alpha.17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.49_1626334396818_0.2982182386305483","host":"s3://npm-registry-packages"}},"9.0.0-alpha.50":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.50","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.50","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"9e8d567b7c94b79147a4f4f284cb39f5eeabea05","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.50.tgz","fileCount":375,"integrity":"sha512-hBhOG+ArNcbE4R5OIpDSD5wMaPdz8fjL3UBdOkkdVhGkJHSJmoECmSMQJF9IlZ8uxf7+uMx7RFIkSZ3BdUzpew==","signatures":[{"sig":"MEYCIQDvNkNLdAkeYkmllyielfDjhET4ueIoKPssIs4R/TcLuAIhALdXueY6uj2emQ6ELzOTfSq54mXUVAFT/PpdgiHIslzC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1405731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+R9KCRA9TVsSAnZWagAATw4QAI8/K+SNpwzo8/JK63VR\ngHD/lCiV7UOLgCMaTYvf0rtx7c7cpyKSktSuQ24KdG3Vve8zHWPc3IAQyyJ5\nBo4sA/mNuOeAMN8KHyV9QJdH5WN8FoMtjyArKHQ8iP6QHZtuFcSa6tWDJ2os\nWijxtyzcXssScGGaw5DDw+DgE95a93TDlyXh98wa1mpvC/oH7TaIdspVdUFg\n3yeQXIknu5PtCNExLcJ07RyLfYnTntIeGRvJKq5MMNdpjLQEyuxhg9zMWoST\nbA99f/28Man8OngpkTrKMDZw+SD+gMlujGTCK2cVyVzeLW3C5Smubed6kSyt\nJGXw32p72s2m6ZJ6/RZoanV5QLxHROOvPIhHUxWmHrCoQvqQNcQPDn2gO9N4\nyJGM8T2+pLr61zta9VR01Bz/vAPlTT8//GAr6ePyTi7W4N+3Ar0kQjj2KL+1\ngYSso0tfmIICaIrNhQz99ju8Sg9m/idi3sUKx0PJg3/Cuedg6GbYHnPKUrN+\njxVVhUjdhecoY3/RMlENZZ6sVlriW57xC2MHqdwT1YOuZenCo2XItBnjonch\nmhLzEFatrOGPDVX0O08moVl9VkOx/D1frndWRAEQs6C60sts/DRjYTmleITn\nkY7xd6hoxybJ+DWkK4QN6tcPhn7vleDvslKbUDiJpJIpkXCpieFayl6J4cn0\nlgR6\r\n=wfho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.28","@fluentui/react-theme":"^9.0.0-alpha.17","@fluentui/react-utilities":"^9.0.0-alpha.34","@fluentui/react-shared-contexts":"^9.0.0-alpha.17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.50_1626939210082_0.20401690858642318","host":"s3://npm-registry-packages"}},"9.0.0-alpha.51":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.51","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.51","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"816c937cafa84ad54a33603249da7b5eaec9aae1","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.51.tgz","fileCount":375,"integrity":"sha512-OzwIUiwKUK5VxEzmw5418eX91T8G+L50LA4KNhvSNQBji7bEsozQOp7DHjDhtY732WCTsbvSGGQz3hm+3Dnpjw==","signatures":[{"sig":"MEUCIQCrPeipgENj3dCM5D4Z7r2JesI6hTLh16xP+/LO0IfWjgIgMPCxwtp7mg7P53Z4OGEbq/y8HnX77e1bfwkfTEsunLs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1407071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+nE9CRA9TVsSAnZWagAAohEP/357g4hiZWdtUt2D2/9N\n/gDVz5SrAZnDDMvPTmFZK54Uhwy3TjYqeeueVTZBrZyfTwMUJbgXuYzO4q7p\nLndeCSfmI7UcPazF/0yWARqn+XqyI4mG/PkRmYEPfMxkA/1/sIr4mHT8MYqz\n8Afh/f2t9sKxKOb2zrkU3jqr/sLbClhV/EpViti0QDwYdyLHsbB7R1n/NopN\n5ATyhXJtVFlEmE0d/Oa5fc0P1hyx3ZPuPsTVn+ZUdM7yby3I9oVcM0+wGVAd\n8X5aHxMDG5bYfBoOmrRebMyzchpzg7bLH3ITq0yWlHVNvZnDbJTVKg+48m+G\nZqal7vEXBczgpmr98aKaCuSMvGQg2JRt3FOrHLWLt8oWxUhofFQRYSor1nHk\n6gVfu+be4M2YUYTw/rvnNgcurrHQEpQy5wAXW6sD8iUt80pRd1oqmRU/i6p3\nlQG55naoTd/VLBgWSQg4Vq/9fFk1KenHYSdvQ9d2ziCyZuqc/ZECSFhD3ucO\njwJrggFD1d5fnqPfDobqZxeugd4mIAW0SsaBOFB4kvnYCKmzmEwElHM3VQoX\n9oHntRFHLFLtx3tbT+wklAEPFJYRyVPFeAGmuWacMFaS5mFWjjx+qAXl0UXK\n/Fkd4EATOfCTnhh4mnPPJbcpoSnbbducD7MEQF5gMWhe0vpjwlHuS57SfEjd\nd07K\r\n=Nz4Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.28","@fluentui/react-theme":"^9.0.0-alpha.18","@fluentui/react-utilities":"^9.0.0-alpha.35","@fluentui/react-shared-contexts":"^9.0.0-alpha.18"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.51_1627025725189_0.7218748135529856","host":"s3://npm-registry-packages"}},"9.0.0-alpha.52":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.52","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.52","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3c0661eaacd3c233136de36794c6b5a371ca4979","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.52.tgz","fileCount":375,"integrity":"sha512-gi7e3c/Z0jJN2C1EvUnlTOWWfkjypsQbGVv8fD28F7gBKDNgIEmmF16Wk6BoWoAk8kuU/8wyMz3pkvIA7ZZVUg==","signatures":[{"sig":"MEUCIQDrAFih3QPtV+wMCQFlR9hFhFOBCgDAygFoNRIiptzpPgIgHhQe+UuLZueJPwfXaB/c0l8UTSq7tH9XUpxV3wKH4eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1408014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/mWOCRA9TVsSAnZWagAAbC4P/3T9Ntsw/RtEfTLVlhM3\n3UVAqFEctmQ+H6PCKcAX0B12PvtQ6qzgAhWXdNIQyIMFhWQCVNqScPnLGERw\nwhDOfZTfY7wE3FvS7uYNgjfBaX7xDZzb2XwQHK6cRkElgxs02oaSjOAe5eF7\nG83/odCCXAgQxbW2FiA+wD68JiZ2ENOHYAcwcfnlwCEBZd71l1/SL1U5Gxc/\nm2VuDEJwr6za/w5iOfaqAGHMwVWBjgn1GfVnW40jf563UGBenfQ8ZdjE+Lh1\nvqU/eRYivVIRJ59RJ8Jx1O+KVHDZ8k9O3t4Z0EW335sbPAM0XLtI+7pfI2eD\nxJawLk8CuCJ2eA78kyV5OW9kdgAN0Jixli+NY9s/lhumZW14zoNBd4ON3Sds\njsM9r4m5kUJ13VseVA3RIvU3EsNn2ZiuMuKeXjg1LIB3aCIzTt4eUCgAAwiV\nEFSEupO+02+gTRlYAxmbajCO215xWJqzjiebFr1SnPRStcPawQF17yYbpMFv\nK+Vesz02FmFvDKIOZCWrslgG6ff54wRhIPqN/yeJzyc8wAiGmexrJ6h3F6NB\nE+7GS1hCiqw6PCS6dtQ/2vDUtJmVXBgzJBhdGBSvPrOWMqcnjGs1pQRdLGwI\nBHqbkEFMlAw0sQjqnqaTXbtYZpiURd5mk3Ph1Gg5Xdp7PpVNv81tGisFfW6A\nFlMC\r\n=4FIq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.28","@fluentui/react-theme":"^9.0.0-alpha.19","@fluentui/react-utilities":"^9.0.0-alpha.35","@fluentui/react-shared-contexts":"^9.0.0-alpha.19"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.52_1627284878208_0.019873660978389385","host":"s3://npm-registry-packages"}},"9.0.0-alpha.53":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.53","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.53","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"457abf08d37ca84dbfd69f98eacc03794216ee2a","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.53.tgz","fileCount":375,"integrity":"sha512-7QY6pinUTAZVN7GbhLy7fITO+kLvy1AOci97bUQm9Hm+d6i9Um2GOh497D3GT8uXkAOWPwikb28SdDn5R1RQxQ==","signatures":[{"sig":"MEUCIQC3GrtHc8eQO3+wPyXDKc76dzifuLnmOZ8IM3SKHpjNBwIgE1yrKcOeMy8yUF2SLUtYdi5fY5dS2FF/j0moU/Ntqwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1426601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB6AXCRA9TVsSAnZWagAAcPMP/iMcimnOK1GSyTdK3vxW\nmGSJ16/fon+ayvipNqatNPTV5RT0ba36kmkbp4oQJTo2bpzI7Q5AjO97cHEf\nRm5l0VgblZTgNaV4xor2C7HNF0iAl8Fu24Z5yhhHJWGUW7EtOqgZug7GXPYD\n4KMpACi/TZjo9k2OAA6JAE72LMv4yGVMrwHyM5E4hkkd3FKNDhcRtd2gkv8t\nn9+oh6rpSPsScNhloZpoRQo2TPPUa4tbCf01z+MeqgLTDe3cjv2hqmHtf+ez\nb6FDtfdvz5Rv4/DEgvvxhDvVe5p7LK0LTMSLaIsec4yQUuz9aXwokgeKWS+K\n4LUKmJd7EwzHXskH8Y6pHSjiRBA7eYp/FQ3qji3t2Q7tH0kswjLRcJtss734\nMNla6VHBwLpwU8OU4Yucuc/WeMMUMn4yxrB6siS4nWNV9BtNpnqhTgTy5JIS\n0p8XLGGothqqtv01P9KkjenZk4RJRTJsusuJieU8Ym7kmWLRnzJ7lEIdA15z\n9+X8jvPu3LtV9sH/OW0GIWLsR9cVqxX/2za5kR/s/WCNBXewfYtMfhppB0J1\n43eGL++M5QytT+HqB7uWOZjlzE0PCc4t5e7cx3BuPGEbAoUl5MOsFZQaJYk5\nOL1s3IHycOOXxITHIRMJZXcr5r+3qpL5Ha5lnQeC38hPdkJGWlSZ1vh1rKOW\nUQIF\r\n=kbRm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.28","@fluentui/react-theme":"^9.0.0-alpha.19","@fluentui/react-utilities":"^9.0.0-alpha.36","@fluentui/react-shared-contexts":"^9.0.0-alpha.19"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.2"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.53_1627889687130_0.29157700415758003","host":"s3://npm-registry-packages"}},"9.0.0-alpha.54":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.54","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.54","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"d0875cb8981c8bf2283fd062fb4b435beb4f344c","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.54.tgz","fileCount":381,"integrity":"sha512-qx2ucP8MYSAINch6a2RXFtgiuKANnYd9iQHpk/IROT3Z3rGOHmv7pgERVfzkoallzE7OPi7K56XR4W1j4rr0Hg==","signatures":[{"sig":"MEUCIDzfkNKcKsD71CNG9PF+HGCG4pQrGdEqa6wqSfyhTGyPAiEAmAlihDoypxdt6e3WJDav8FJm7UM8h4irwjIcgODMgCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1438279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCPHDCRA9TVsSAnZWagAAfrIP/ie9iOezoEHANM8TeEOG\nAcyDtFODQaHakqEGs39usMNMReN47RCNgcAOO5Nf27d/QqWo91evDIhYMKAq\nyJt3061vIE7SNqGrNIyNN3GrCVDGwYOd15p5IEhhqSsPdXqQfjnllvnHJhsV\naQg8+Cef4G6YzHfeGfxEt7HrJwsTa7bUidg95y+9YIC48MUNJ/YTaLIHYMUF\n9/oTjHLcAJ87qd27gRKUyQeSOKztCC4Q+FRmLXaU4XG7A/uumXG7RVgV7CZG\na8d6ksr8XysVBVKy+ZRrUa3bTmISSr1nfh+sgK1E9Fc45EEWHinISDfzVl0B\nlWZr0kaq3v3tiNkX/nUoPq+ifMhuY6SR8It8sLt20RAbzkV46/5c9+UQ7fy9\nWDOD353fQT9zOcheRx+bgm3MQPAS6hDlGaypeZcWmP/bWF3WyDfQJ3K3KK8b\nUFQSA717/4uwRnGrbmanY1KmsG0SkH8S9FRls5NUcWuqnctg19n62BtGKS7Y\nWJgMCrgSgisN3GSGg0hRblpGRXM9On4JjpBSTusfiD16Z19G0r4L3VEasYeF\noiktw4aFHOQKUVbQbNHL0DFeHy0+e8XJWv0ePitry0BTpLDsgDoI7uScKpjU\nNrBE3ra0C/6TXQOrPn9pD4vAS1iGAfoPy6/9E0RtUYdkzWsH54CNBNCmTrbo\nbJt7\r\n=8CmA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.29","@fluentui/react-theme":"^9.0.0-alpha.20","@fluentui/react-utilities":"^9.0.0-alpha.37","@fluentui/react-shared-contexts":"^9.0.0-alpha.20"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.3"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.54_1627976131600_0.46363272038358816","host":"s3://npm-registry-packages"}},"9.0.0-alpha.55":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.55","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.55","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"c95317689a5f62419d9c1b8100f68264a7cdca1c","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.55.tgz","fileCount":375,"integrity":"sha512-VuW93k/72baCxWNGjYYBCOpBMhsXxU0ylp0gQFnUF+u4I76ZRDp1rW4tWPtmjHQXnr0B441HIz8ji3coyTOdpQ==","signatures":[{"sig":"MEUCIEBphnjdym4iIeOuoqtgSAy13S+ng7sXFVZgCNbHEsCIAiEAwQptohdaGm9q/elP4g7SPKoIhMjGbbMIbss60FnXk5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1312110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDOW8CRA9TVsSAnZWagAARToP/2b0iFBc7FWxEkYu4Rp0\n+H7x0wePLeiCA0KxRXkguVwxbRX3ixEDrWRDsrlOf+bXbPLu+akPES/Cn3Xb\nniZbqhFXTPXnMJvK5SWPfh77FhuSFMQH5r8hjltmah3kfErsLRwXeNUHOA/m\n4DP2iOyMVBYZ0TKCLlVTH+70bp8bs2oH0kOdtF/gtamfXiT/FxkMx/ynwK9O\ndQIEz6Qlnhu4Fp6/9kguqWRRdehe+iBfYD4Lash28nzSiX6VuAmfQZ6Pj1PK\nMs7QNRQ+CUu/wS9H9kjrHscEpXmYKL2KqP45FHunxg3mMcIB8BpRcX6kp+j0\nWgSwEkMVIP5eQqVB/pt/m4gmzW7NjTIRIp6yfl5CcqRCBTFxP+9Afpb4nYrJ\n4me9aFg+bxYzH+BtI0ar48/T05s5Pc7YwhFlgD3XedZNUWm+9j9GMi70q9yD\ni7s18mO8YFQiC6EayfH8MxA5KReBnvNLeSmkiTWk/980MUy6dZ3e37lbNqsR\nVeFkiIMVVW6HWUWSq7SgxP+JqKSs4GEuAFqp+9nIH1vXPUajaa7KMLUQz3sh\nGasxD95M3x8AtlcwzaWO425Imb2Qh2VcPtqMcqwFe4eqgN30ac8k/3sc0ap9\nGgFGuj5lZEPOwRkCHdqlZ/JFxJDSt6io0XtYSie1cJ9xBjbpDEuTKqaR4nBV\nnk8T\r\n=tjNC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.12","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.30","@fluentui/react-theme":"^9.0.0-alpha.20","@fluentui/react-utilities":"^9.0.0-alpha.38","@fluentui/react-shared-contexts":"^9.0.0-alpha.20"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.3"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.55_1628235196701_0.19547424891488752","host":"s3://npm-registry-packages"}},"9.0.0-alpha.56":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.56","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.56","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"1e58e69f286f3f23a63cb15b86d6c2a60314eb82","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.56.tgz","fileCount":375,"integrity":"sha512-bErG/lXSsvuUXmr1Lz15lCBQtsqfz7S91Hjs8V1XZg53qVnUn7k6h4GLOUuBUeXkxFKOQB8BbZTeQmBLzfusig==","signatures":[{"sig":"MEUCIAJLEnnco4oeVl630nc5U5SYlBc3DQ+FCXnw2krag66ZAiEAtJqM4FxtO/C2okTsSIlxR7YvohgemtHJqnsfv4qp6Dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFiBjCRA9TVsSAnZWagAAzhsP+gJT26z4qQNSyVsxLzLu\nKY6GSyEF4UpD/d2uTkA4z5Nxpei0DziWzhaFKT+jxE+aGNMOQ9hs5G9EIteq\nDuZAdun5SVtGlY/Yb8BzI//IKsqU3sxH2VPBDHf+LCH+5goWRHCGBQsjW5nz\nO58vPmpXh37DW6Aaxbq2TozTeivW7KE9sHr18mbIegK0rDJ1Nm8JdHY1cNXo\n8WR3/C/rRrdriu7hyINlmHjRbNAM9IAd1TS72qf3mQoUPelQEj96sNg2r+xu\nhEUl/YM5ZxlK/BT4IXH7uA0qzxyBFMd9ZFzty7Od5KsmmRKIM2qCfnQJdUQN\nHxIbXIaDir+dH+0bJw16XlqlzeBIafRVcwr2s7nouMNMCD82zBKNSzGCwNv8\nMnjpdTTawMp1dZXiOGO/zfJQOQ71rvi24aYp3H0c+BxtCUkHJqeNPKunF56M\nOjudCMO0ETcVAlS4M65Z4oeWzOZiZyPSjgheKONExpK1XDdD/lIZhk0ijrqO\n/LhYHTFEdnrKvVICpQOuyrgAC1BI+EDtk/csVhYjBOG8aFqoGp6VQ3s+7ZhK\n3dvBRtvaNCpqX7c90htXCIiKjKygUeq+zFFxNmG+pagY43lwveljGeZ/t0EA\n9MC7px06S+pRHpUGHWZqLfXGokBP7iit22L2pgZLba2MRpFQd5/6tsSb03mY\nveq3\r\n=G1ge\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.14","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.5","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.30","@fluentui/react-theme":"^9.0.0-alpha.20","@fluentui/react-utilities":"^9.0.0-alpha.38","@fluentui/react-shared-contexts":"^9.0.0-alpha.21"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.3"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.56_1628840035595_0.42856966716579903","host":"s3://npm-registry-packages"}},"9.0.0-alpha.57":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.57","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.57","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"6f62a92af9c6c27154a08d8351aa7d567dae857d","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.57.tgz","fileCount":375,"integrity":"sha512-2ju7FpJHWi3oys92kkN/JFDZXGr/vsfwhakRHMkhAxtnZjWqN8Ty4vYxbzmBadYoz2aJjwDvnbsWQz/twhefPg==","signatures":[{"sig":"MEUCIDzMXVZN5b6VEAjK4cLt7J8in4xLIesDJq4x3n2ja3ECAiEApwVCbZGJsT9aXD6yhbk+Wo/PkvxacqaOXMYT1UmpWAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1315228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHgocCRA9TVsSAnZWagAAUSUP/2pKjlvnmHWckbmNYEpV\nokfrws8rZQQgVWk+fpMskV1ie9D1eTA4ReeMFrvzChtVHElMrlL2fa7buTGG\nBB1OINmK2wSrVIq49YkLUUDZMEHebD5fYjXnQNHfbRQO4AeZcSCThtySrVPj\n2DwGsC11tbqEYkEMgjKIEZbK/eVrQlMCvZV9jwrPfm/IZzGFMcAiTRYAcgze\nHdwPcJsxNMOnvqTxk1VbJ3uNIAeBauzRfsMWSqE7M9Q8pJbH3zLN2y1hGJUc\n56ibO+7+nJHk8SmEGmzafJZX0BFqsQXBYFj2B8MFhso5LMCqSkT+dSULCE0E\n2HnU1CBRkbcprk6tmzyEDrUwcMLJ+0Q712jZ5HZGJ1PV3vtu+dF5FaD/p9w1\nsykilWwc/nPrGdHssWFgmKGwWLrcTkhMIk21Pjp+WdVOjsqaQ6WXKhn3/3mX\njumRldbA5OYPZNTnC6tfHYqZJQ458IgAQGndLF/kPpaBUV5GDGan4YiZFpa3\naR6eYiFWb497zfJDJXwsxiaPqjKfrby2NrpmAA/Cxyxg5L4Y8YlVkTZaMraq\nRy2FoKGOi1DSzd7SCLBvhV3eIac30J25gj+q001Q7WoiZZXII0QVxe5eEs40\n/Dbjtz7URou6XLtuPLPI197mNCzVuMzGUoHket0Kvw0/9nLHXbryMqV0BzIu\nsOAW\r\n=AAzZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.14","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.5","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.30","@fluentui/react-theme":"^9.0.0-alpha.20","@fluentui/react-utilities":"^9.0.0-alpha.39","@fluentui/react-shared-contexts":"^9.0.0-alpha.21"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.3.3"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.57_1629358620282_0.8092140569857629","host":"s3://npm-registry-packages"}},"9.0.0-alpha.58":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.58","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.58","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"059c7217873cf892de812596368e6d3f337772b0","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.58.tgz","fileCount":61,"integrity":"sha512-8k/G5P7CtpuxOXHg9czUKPeWsWK0vhWf/oqxEvj2e4UnL8VyueDBkrLL0SDa1wynMmto1Ig3pIgWk9AQc/V/LA==","signatures":[{"sig":"MEYCIQCdG6MWHsLJnP9UUQj7zTwgJzmBdwoRdRH9ujvXbgjm/gIhANmp9tisOr+pkdqZZdYlZva+5rYahE288i79zw0UzpHj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":158561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH1szCRA9TVsSAnZWagAAISAP/3ypNEtaYN9INH+yKvPT\nEw2ZSafQBxPVuXT33ANRZFPHN7PaCUOA+Av7NFzJBofOHq7+Q0MuLUl6hmFj\nOFbQEmzQg+M6T129GVjS6noST1toA7b3gHI72N0VOjeTZHD4f6h665j+MG5a\nJs+VN3l4DJ2zd9yFa5zb1/0u/LtSa4Hn4CdGqkLVWlR/HkdCMRIvKRIyVZvq\nlXdJv2VVx/7y9P81tfhICPjxDYNvnvansO/0viwNmok6gm6NwSepDcthwDFk\nOqYxp8wCM6CaOYRpOSm3OK22/wtndcVt1h4jY8bL9DnryppEDWgoKmF8DHre\n9vS26xuYIs8PGF+kpLzi9Jqujd+7FOBkBcDQ/jVlvKnpdeVd2ShxzCSYA+Ey\nftccF+V3NO3rtl7F5Mohj3pt41o1uUvJXV8NVTGw6/4SLlg6S3fUjd3fguXb\n0Mat+zIM4tgg+3mI4Wy4v6MTAFyEvd8unWs2OnqfGsCUho18VtvzLsdS/uQU\nSsWrkz9ABin4MBAR7iY0ejbs1uJN3K9FqJW3D2JL24V5GnAiKKtj4666axom\nHZQzUyRcXdmRbiyspROAoGmwzWWQ2h0PD//UA7v3SMCKu8GOJrf+EA1QPYBC\nLiK17Mxon1h7VP/bW+OeWRMLLuqDKx7KaCuKT0zSWJs8ap0lasfx13XC/WOV\nLqTP\r\n=TGJ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.14","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.5","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.31","@fluentui/react-theme":"^9.0.0-alpha.21","@fluentui/react-utilities":"^9.0.0-alpha.40","@fluentui/react-shared-contexts":"^9.0.0-alpha.22"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.0"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.58_1629444914891_0.41469646727546605","host":"s3://npm-registry-packages"}},"9.0.0-alpha.59":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.59","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.59","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"7a30c155c4fd42419d8e1f81b961e2475ccc4a51","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.59.tgz","fileCount":61,"integrity":"sha512-V1ILCh/COWR3Q7vpxvXaqWtp5DBd64jvY/tUHZmMuVoW2iJAP5Q6BdQBiEFfRKjUc3A4nKKfrBbwHIU/HlfdyA==","signatures":[{"sig":"MEUCIQDC25Ax2+dumE/YQnitVGTk8ebGIbue49cU5C9Qf+l2pQIgGSp5O9k+vypwKUtuZ/Io0fXAr7GpZhRODEpkgDzEdpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJKCgCRA9TVsSAnZWagAA34YP/1tUdYsityMWK+300ysu\n/zFvHHUk9UbUcir/zV5tiTPrBI/ggnghcjcNgYjl79OTZhR//8AqpC0/4jB6\nMc/5IudSuQosEs4VcaajtQ2MCrzBvYF9QGlFfYI5wWg9A4ys2WyG58J+QUJn\n1azt2BNYUN+fOrOcJUR3FCdpN17XLeV9i345SoCXauTA+F9Up1OwJzYW+nGm\nCYXcfEA6iDYY/dAvyk09wyU8ZmskkGTjSmNwaneIVfOm/6oCnoeyke00tbb+\nRdRmtVEh5pN5yMtdtWeHCq8Ds3KS905ZN95p3B39MR6AoqY637RKkpXJhYzX\n6JfL0Vkhgwywg2ZlbXn0Uud5SxJcjb/zfmlLGXDqoUGmEwMsUK5/2HkfyLiz\nTLQdJkC+yh9Iy50REfZxPbr97fCDtcoNoPdlErTBamWGRW3/sbBetvl/iSn/\nW02yYzaKq0qXrNywn/YyhLpzkG9Y4AcIBkwXujLH0Cqn13Aeul2V1dXv/4MH\n07VGQ6pVrkXWFlKajY0tGN1o7uJYgt2l1nD86D1faKTD5Irm2YmNMwe2auP0\nFtmf77h3xk1slYtjkgFYJMtDoXYyAMwtWtZebnltBnqUuApUSWHZMRyO/gcs\n34/V42BCIADXCFOzwdRCMySQsl+aZb1MlIlkgZ1GBQLuXlSlNdrUCRvjfGDG\nNwYU\r\n=nt5A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.14","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.5","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.31","@fluentui/react-theme":"^9.0.0-alpha.22","@fluentui/react-utilities":"^9.0.0-alpha.41","@fluentui/react-shared-contexts":"^9.0.0-alpha.23"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.59_1629790368078_0.19000374698677436","host":"s3://npm-registry-packages"}},"9.0.0-alpha.60":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.60","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.60","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"ad210f535017d35d1bcfafbb95ad180ac79569b3","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.60.tgz","fileCount":61,"integrity":"sha512-OJU/rKMrC5xAVshlLKtpI1jGc+rE4tcoRE1ZJYRq2TOyCIZBw0CeEQOcYcygFqb0B/z0ahrnZJa0c5dM2gkNfg==","signatures":[{"sig":"MEUCIQCDl/i0x4rlO/cabSBHJwGFhdn42jlKRQga7pcDU64YSAIgSfvfLTQio13LHn/jSpCKGqC/BVF+Zmp93WhqB7SO/xI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLduWCRA9TVsSAnZWagAALWUQAJhBZznVd+5kFxUtI3HV\nnNkdlexCEIOWkeAQn2UiaoR2fP2zMest7wL1C6Ezx/iSvA/jVbPUENZkDjzo\nGvjQ7Sp9373OAhaGq9fs5GKwgLPi+5CBwpNsPLsj0Mg2xKkOYRRkq9q71qTr\nesmlhamMRMzlzyOCqjz2vCUefKMPf+wTXcca2XW5JDCySq3c5nApmJCmwkfY\nCFIBdD2DZUPR3z7IEm1wgRMvYrMDuTNaqmoFaiLrgU8FR2+fLtxA755LAABj\n07Lwqu1sx5s70DwVu8voGLmK2mjyggg31hzyptpN0bd7+F66ESAen8Nd91v7\ner7BxQVkubqEzfQNg+wctC275nEp0zRf2uT7HSQ8q6umDtmpcoU5WeA1ev5d\nypEpsEiV+MHbdtGFAynJRbRTZRoR33sLyshuM2LA15ZFY+wmlLAjJh6nbr42\n8Sz/R30K4xBG88BsOBV+s4NESVeVb30p61+xDh1JNXJBFaP6ANPxXW7X7qeb\np/02RhofCWe2Nj/KMyDWdFUpsbHemcXFRktt67G37F7emDrsJozGrza2Mtf5\njmKcnbk8FTJiax2y7+/C0M9rnSdhjKByU60Ji/T7lCeoNqVJQgXCedYcGMlz\n5CBToJ+IzJAJn2pK++YdmWb6mfghOXO8+RnS+by3uk+DVKx6TZIOoLg2xzlF\nLuu0\r\n=Fy0l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.14","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.5","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.31","@fluentui/react-theme":"^9.0.0-alpha.22","@fluentui/react-utilities":"^9.0.0-alpha.42","@fluentui/react-shared-contexts":"^9.0.0-alpha.23"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.60_1630395286439_0.6039895176065051","host":"s3://npm-registry-packages"}},"9.0.0-alpha.61":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.61","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.61","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"617e340aadaf7e0e70dd32780b1a336cdbb4882a","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.61.tgz","fileCount":61,"integrity":"sha512-06y2T3ceQtnHKR42ndgUh5e1qigT0698b6HMsg/twieoTQHzn0E9Qay+DjivYz818q1RA/FlyeFUoLzgKnWNlg==","signatures":[{"sig":"MEYCIQCYU6IJ3jT1QnJfsTPZJoPnPv8ucmYJzCmBKIzw2HeGlgIhAJXjPwbor7Fym8JinhmuFLJrle4ba2ppUEBetVpqPmVk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLy3uCRA9TVsSAnZWagAAPgQP/0md/6X7Tl97JvgdYFMk\nYdfU09d+x95yJHfqf+1R4D/DXw8L420L3O2O4gL43D9APykU0AHj1/FmUr9y\nCQwZjqUdu2LzXg8Xz9wtUJF+dNkp23SOh+RFMlOsDh9TAaWScf0JqV4DwAXd\nFGSGVIXonpv1VImcF6HbTLy6PtFC3R6eJZ8V9LE8PD4aqBDJb+6ILKHa1VSm\nREPF9htquhUY0wBRIlLsnGvyL5M54S8av1x252dmH+H0nTlDoS5SMMlxv8te\nOUGaaMCRwlq3e7w8x05cuR0C38N6A3GbI+cHU5w0LNdvGvlVsFeh16/2y2t3\n6CTyqaFL3cvPn0Oo0JGdpw1rAsx0L7ZTXlM1JQoaeBQ2gf8cFOXX370W+nAt\nSvL9J79nTv4wcZeDG4Xwm7ihk7Jx1JgYXZ3E6IzSfE7LgZCuIgh++xnqmhqW\nPRO2My3e6TPJIJvmEp29odSH3Rw05QA3x23Fiuf8xixLQOqVCLtRKwKnsoVH\n3JbZkhcLCU9+i4l1GC4nQdJaFn8J3V9wG3OZAKEmpL6I3Lzl5CvgaN/2Vi7W\njkNvaawgArnCUo7rPJkFJpBM5DoFtecOje5q7xRsHkqFFqvEpecC1vGPCXZE\nqiNOKk4t72GBiGLE+CyBvd3wFBBALPM78JzYxJfy+4YueyC4tJz/Q0E++fO4\nWAk1\r\n=88iO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.31","@fluentui/react-theme":"^9.0.0-alpha.22","@fluentui/react-utilities":"^9.0.0-alpha.43","@fluentui/react-shared-contexts":"^9.0.0-alpha.23"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.61_1630481902435_0.7432097225338363","host":"s3://npm-registry-packages"}},"9.0.0-alpha.62":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.62","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.62","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"eb5ff704c129a893fc66cf4d7be77c91cb5e9c21","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.62.tgz","fileCount":61,"integrity":"sha512-zaSStoM7rOGSjRjZ6vWIbuNA+52J7oi7oXX4gHhsVxgsc1o5a26VWl2TYPkdrL5YH9QVqkgyG0EGTNPzUO7fyg==","signatures":[{"sig":"MEQCICZlqViz3RMsn/U7dSts01jGFlHSX3hpbCd5jan4aPBmAiBrZ/4ODWyHvvS1xgbPsj+sis1p41yTQdAtDGZma8EEZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNcQUCRA9TVsSAnZWagAANU8P/jAEgpvVdpf49Z9EsK2F\nqCHa9Tl+BaTDO6kh8poEEKauZSJ34tvkboOPBUR02wW7uClhP2wv0Yk2fUj6\nJFzYPJLeNwXNXS8PxJgh6rMK6Tjec3yM9lKLqxaSKzQ43eD5m9BcFCPMERTa\nGdxvm8L39+fjT3+eCbgQ0LNjPjMdSnxHqq3KpL4D619ypnOFOCUw+dhjxfFM\nT5etmFBeZS6l9/UdoE4vdMWW6ffF6T0/dzpK2iI+r5CAX3B/ebSCVe6lBuWr\nSeuabR+fMFdMHXWIjjBlsB6ZHyH0QX5dI7b5IqLLL9emwDPxx45baDaRqRyX\nSXZMfOmqCKrKGB5HVr/uHz1RhaPVi98wzfFgQOD6a9ho00VrBpKloyRlExyB\nP06nAJHZLZPJn31aXQFRMLRcgY6RaMMSrn7RLvnoevJc/MOLtBEB41WHVvRA\nKHw0DgqWso5lQuspMgVDxSptEQzejrVhgwPgMr5rRnARe0KoYT4Z+OrDhWvk\n23E04ww7EwGAZye+JAc3gNpaQxdPm44Y0aeqgeQu9p1mVuBA66VE5AfPq4J9\nZwSmrD9pJuk/PU4yLT4m0LE674C8w2FYWVV+oIRxFOsOhnkZSLWGU74nzK/0\n75WUWgFOo+iVywV09nK3cX2jugnJODUmxFX4YvtsAV/9DahKUTVq6k8ro73H\nxMu4\r\n=Xlzk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.31","@fluentui/react-theme":"^9.0.0-alpha.22","@fluentui/react-utilities":"^9.0.0-alpha.44","@fluentui/react-shared-contexts":"^9.0.0-alpha.23"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.62_1630913555855_0.1372419398142284","host":"s3://npm-registry-packages"}},"9.0.0-alpha.63":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.63","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.63","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4304744bd0903626ad396fb377b3eb2ac42816f2","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.63.tgz","fileCount":61,"integrity":"sha512-zvv2vXEycCHVw1aVEHRwFE56JPNjjkPPylBe3PgXVZuSTVxGAoEbYeo+cTKCS5ffeZqbVLIleDVaii1JG9ameQ==","signatures":[{"sig":"MEQCIBT90GEfn1Fbapjot378VA2QetomavZzS48Sjox3CVZNAiAQVwBU8/3F5KH2NycJoSIKQTQhsj5yS3s4qNQjbe3t9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOwsPCRA9TVsSAnZWagAApNAP/0LZkKZWh/yuCj4boD65\nXg5VeQCOG1o3/b7DeeFb1Nc0Ooz15d0l7e9hqDTC9Byl8BYYtb6/FqkivQee\n8vRsIAg9XqYtDyyIvSoH62Q9HKjO2NyTlgZZykqMr6Wn5ao5251TprSUjP+P\n7fdK5/JePyqMbiZPMgknrsc3kf51McIRziGiohAAC/mm5H95a4U5KGONJyFJ\nLENJMmuLyT+0spiHHGr+RgT+d3nhSu7QIvWNEht0xAlamRqpxe8jkmju7m+C\nFQmPbEXWLaOCD9uUQXEby1rn+HUSE5EfrcotBjZ8ktylPlzy2+v3LKdmOIaQ\nJIcyUV3C+ECnIlha54Rg9YE+NaT+PGmItb9wgp7FaV5glB03BCcCWADPjjcm\n6EQbc4ARP9sUXCn8YBfGbo6jI540QQ7OfXvhlOWkQyyPBB03FE4e/B1vtZAa\n00CyXHg6OqKi4YorL+n+4YjRoWjI4i/v93B9qa0Zrsq7bptFbHtNDTVaireS\n0WgXZSYslaciWDvZOsHocFrj39X6UUxHgLiCoor+O74d74XBdwhjv9nqheZy\nPQjWFXN4H8A0VVFmMIU/bnolW2nXKjgcED9bVHlefbJC/tAkLuvr1XtIS3l1\nevLX/HuuvsOeJn5pk94bVzVpsUo1iuCyzmo279rtngwaov19S3P9Z5uxIShf\n5bsT\r\n=VIZy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"^9.0.0-alpha.31","@fluentui/react-theme":"^9.0.0-alpha.22","@fluentui/react-utilities":"^9.0.0-alpha.45","@fluentui/react-shared-contexts":"^9.0.0-alpha.23"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.63_1631259407771_0.17860208022829083","host":"s3://npm-registry-packages"}},"9.0.0-alpha.64":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.64","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.64","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"a5e576ba6e0bfc95e3bddb411c916942f4d267c0","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.64.tgz","fileCount":61,"integrity":"sha512-dJQsTebwKdVDIKBAhDEBZWn4E124zR4BvI9pceLkJzkZyonKumXvgYrhA9Nj27z6XvFyL7FG8oW4k3SXlb3oEw==","signatures":[{"sig":"MEQCIEhgCBItdkXFD8YntLZhlNDWh13ydGPTlPCK46g3Ca2PAiAze67JwFUPGnpxiiqEzKo2f2a4BG8g2FfaMzODezR3Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO4gaCRA9TVsSAnZWagAAqXYP/2D3UmsiVaBoDd5/WRBj\ntKPDOiSPkCY4PkJv9F8PP8HZkhavgguAlr3Uzs0Wl+RZzHFwMLNwiaR72RMW\niOmX0DLhh/RP0CGM3IKTz/4fkIAmwsN/n0I0aYlOiXaW0PaqByQY+TuH0sEz\nZvluK5vnLPrYccnlSv93uScUEd/khkiv/1yfNQ9nHdEWrTw7sFpAozedfbbF\nqTRZz7AFjvE1fl2ufGhHjT7NtJYWaVerZJFtwdWsBcpEVr8YzbS3awh7bSZo\nlTym7dJwV+DCxcsPdnP3s/MHLXV+kyAl6De4IZ395Q7rbUR9SZCwKcPdGq8l\nq9NvESr17/i9Aer/nJa2VtrssoZI1YkYEh3majN/08HB4k4maw0xvUHJUHPn\n5nx3D2gvOqFUrFsw0+ArII4pLz83msnNbIQNMN2fgs/omoDb9guaVXDWlYzD\nAI7pFYaQzYCZ7FTulVesjCBdl4/w0njQqlbHGgzvhpKtkiCIfPE7AUNrjCsH\n0pxLf/noiNcvptGnqd61j/5qj8cLry4yjyEx2qMU//do8gpbX5RabwUmIvrh\n1P8zV+EnR0JgoGVNNvcoHxlGqFv+NTEhUCnwGQwd9r7VQuVeW1ELCwgbX7fh\nWI7+q9DRcrPRyi7z5drWvk/q5Gt+FkPV5MUYWsCIghk4O6ztLoRRVy+E3SfL\nL4Jg\r\n=eFFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.31","@fluentui/react-theme":"9.0.0-alpha.22","@fluentui/react-utilities":"9.0.0-alpha.46","@fluentui/react-shared-contexts":"9.0.0-alpha.24"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.64_1631291418216_0.007216926192149309","host":"s3://npm-registry-packages"}},"9.0.0-alpha.65":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.65","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.65","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"6e3082b961eff9674d4b9a3f6640d38107574130","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.65.tgz","fileCount":61,"integrity":"sha512-f4plgq3SSHjAPOYldQ3+ekAFmg/O2/v4x3IHnd8HfwLj01FBkhtT126nLAd4WgL3ks1H3SyLxI3ZzpMeppzB9w==","signatures":[{"sig":"MEYCIQCWAqRLQtlggHKBw8SyCJ4d/yZH9BVaLioQoeVyNFLwiwIhAOsu/RzyybLF2yEuJ/tM34rszaJej+btCleMbWw3tHWt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQQDPCRA9TVsSAnZWagAAkrcQAKLZTNSXZ1vXhyWPGVnj\nwf81nc6ZYCc3hk6MmsHLju2IvSBp05dgalnJrEBRX2hj43TJ/nDqrY96Y+9m\nlX9SyfLpbAx0qYiT3QyPqLV+DKIRxzZA6spt5GDUYPXs7Ff1E2/8oaV1hVNK\nDRW5nC4qdm3juSkH+3twEHVQ4VP3LobwYh6hyI/AIpSe35hafqZ7O2qZK5eM\nmow1GzLKH5tAmu8nNwBpt0O5cfWP8/lOiBUij9GHu6JFGMHIsPq/uodJfZE9\niKaKjmRsFmtzNxhWWLleNU0/QBry3D+Xd2nIMnUjkDY5pTx5tQ4G+tFj2lGm\nHJEU55y9LzWBj2ByU7lyHMUZBLh/meLVbBIKXLqT4ap5ELvL+J6HP0X5hA45\nk8rADdzXis6l7CjWmfH6T2inALxk6cHx104OIWswr7J46zEwMvvK0Zu+/E+P\n+DFLAKQq2PDcMBB587mg7yIDy7QIfBUCmMWob+rI2f6J6qTdvIP80/hf0j6h\n1T8qmfqJh/cLH7rxBd2Emu5kd+fCjT9wGRxBYtvVwl8dbZX3Tvd6gpuMQa4E\n80hspFAbbnJnRosr2FcOUj4SHMG+W69sBnkrC9sWdBKntnPR63SgDaLpENJx\n/j17DDWD185Jm4aa3kOOSi32OoVjDJv10/MzIZ8jn/9SD0vyK0bBsyUxlXxG\nrKVa\r\n=5d5q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.31","@fluentui/react-theme":"9.0.0-alpha.22","@fluentui/react-utilities":"9.0.0-alpha.47","@fluentui/react-shared-contexts":"9.0.0-alpha.24"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.65_1631649999187_0.5862744651601317","host":"s3://npm-registry-packages"}},"9.0.0-alpha.66":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.66","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.66","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"71138f4e98ff48644d6f5c0410d55cf6cf3e73d1","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.66.tgz","fileCount":61,"integrity":"sha512-vBZVaUDtIMYk1KddAMUCzbIS2j2rI0ly2yza2hniGRvRNI693yId/RjVgMA23m4/dbavfguep/eUlFZPJb4X3g==","signatures":[{"sig":"MEUCIQDFxAoZY6Ncn01u+VJ++sSzMWO/lC2eMYdJAUmjTIk4VAIgXMHTd5lNfRcHX+GdombL0dZXaoiE6pOA+X7bzqKVcw8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQvPtCRA9TVsSAnZWagAA5R0P/jxBTK1WGZhW0wsly6Zb\nug0zPZukM5p5Wa1pFcm6eeofrCRZUYpkGroqYOgAq1C6z9ejD1539e+o++Xb\nkcBfNOcVGsjWoMv138xM7qq97/KJg1m1cu9nloSk5L4Hz9yrVlEqZ3P19v36\neJes8Iwn82BpBLvJKRbivPGwRLnuggiCluY/thg7hhdjT+GYXfm9XAS6KUtF\nhhXU+JpQ7IMOJyX2sYRTStjjPndycBuTGcKA02f4B3gW/9cKr7Kf17KQGoFi\n6gRn/2xdWg4nRh0HyUsy4NZsPs9wBpc8b/e7NE7VWA/kg9etdzznkt/8jzkP\n1TR6vqI3Gogycc1V8mdlZYt+FufS6AWLrrpwXHwOA7tdogvvu/zZIUA+rGO0\nCZZFoqc/1NmPBecbxSqthHbiQ5oK+Fm2gwACKAsyxQ4Y02DItW2/je+N/YQh\n72msVz/fEqCFkG4lE5lqLy76oHfRFnXvoOzgflF2ihjOs527qsVMbQouUc9u\nBvTXFGC2BL6bxgpQXOEYVVMMqAiFMUliKekfv5hU9GgYqqGlIbPqWd4EjW47\nUfXqSIaMKfcJw82hL9wE67SvLMAcq8ai9VIQgDyNO6QGnNTFXoqIXvSKQ+YW\n7WtyObxdz1q8TSJ7SbrJkiB6y5bWhWnGKRmfvTFhyXbTsD9Sqoc8UGPdK8cm\nTAGp\r\n=QxcL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.31","@fluentui/react-theme":"9.0.0-alpha.22","@fluentui/react-utilities":"9.0.0-alpha.48","@fluentui/react-shared-contexts":"9.0.0-alpha.24"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.66_1631777773309_0.5526666813152294","host":"s3://npm-registry-packages"}},"9.0.0-alpha.67":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.67","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.67","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"1ac35cf81af9798f963659a61d7d853784c449b2","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.67.tgz","fileCount":61,"integrity":"sha512-bJ3cK5TAbJjr6Y7MtSkoZEReAk3s9wL2DaOjrnptRaVZTpVldM1BNpqbhJLt/iVfQ4AjbBk5TQUynVQXY4KGAQ==","signatures":[{"sig":"MEUCIQCMCjKRIHoaDJ/iGGCblv/IOqUm60982PYV2xDFQPaMhAIgPbm2ycFTKsXwH7BHotnhuLNg0lMVRrFX/TQIaL/qiEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhRES2CRA9TVsSAnZWagAA3gMP/07IOD+ZYU5j2cXc15YE\n2lLkiyPMJ0nONtzK8nv/9d3qSVV2GXXgc9zOOPT/BaGce8Jc3NnhYq/eiWIS\n1NYMPmuF8T6azi8koKEz5pVT0UZOXKZoAfFI5y9ZVJ5JDlFcUqDInW/9gB9N\nxN7EfhPuDFi27HmdEzNwr76AquKKBzEt0qsSL5hyaAm0wqadCmVvxAIgYHpU\nN9ZvY2NoymwtQx2IklkbDg2iEJ3zwIP1TpGnrWdtcOhss0rAGyvZfbwrH0+J\nV4oYJJV/eFdvQtrlrUUPmFxvBLbvR0seG727sIaCQyAcdCMuNP/QcgV4mo6N\nV9dhyOVs6tffGyhOd2qP9S52TjV2dtYcDY1rHBz2+FGnLHFVMBBhig1eAYBi\nZqavZsHhT+efm1v31EQiYoTJj7ppVDQjZvKu5uwY0a9T2tWEAubN4p6St0mO\nGeDR2xQxeLzFCLp9/iNW9WNxNcpKf9dIrnLBBVpCzwrB6OvgFkHlCfB18A9x\njDfTSE6/eWmrMPWHuJH/9/IPpmaKuG83P94s+uOlTwwLF8ULPxOrJRlBAksi\nbrvdAjNLT/kZ8mWshbhqUhruXJZGfHnfFXYlACYjQTsaZKKAVRUsa70LeMOp\nSqAnN+NLFR9osyRh2Nb5Ry9U4ZmGpwRzH7Zu63QH2Pxm6Bfq53gZpU2klCXd\n2V6c\r\n=bN/q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.31","@fluentui/react-theme":"9.0.0-alpha.22","@fluentui/react-utilities":"9.0.0-alpha.49","@fluentui/react-shared-contexts":"9.0.0-alpha.24"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"^1.4.1"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.67_1631863990397_0.5266132718887135","host":"s3://npm-registry-packages"}},"9.0.0-alpha.68":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.68","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.68","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"43b1db101735a1605fa557fb280de22054f9382b","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.68.tgz","fileCount":61,"integrity":"sha512-3aytmLCYcHFwoF9MbUyqmNXD842+kI3whospeDLVMGhrXFQOyucY7zZ7bLsr9gkjGWNPR9slb6KVVzocE1G/vw==","signatures":[{"sig":"MEQCIF6J0fozV2iJw0jImQnGs8QYfwyNM/qCF9ikTTr8MjIUAiBwjThinaZq8XJRuNFrtTCA5R+YXv0MIO8dbOiKuVRpIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171165},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.31","@fluentui/react-theme":"9.0.0-alpha.22","@fluentui/react-utilities":"9.0.0-alpha.49","@fluentui/react-shared-contexts":"9.0.0-alpha.24"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.68_1632123328324_0.44320535502062985","host":"s3://npm-registry-packages"}},"9.0.0-alpha.69":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.69","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.69","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"cbaca27b7358aef1526dccadf5dc963bb9542c2c","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.69.tgz","fileCount":61,"integrity":"sha512-8qYfH0unpdgVkE4UtySQErCP77NhD01e/unogA4812pld7/7sVYEYQH+ysdk56B19zJynsOXcgNT8RzWMM1SUg==","signatures":[{"sig":"MEQCIF0KiEd+NO4VC1ZvZ5jy9ZyA6kLBUhnmZU5yYTun1T1fAiABOqS1uonKDY2f4vLYw5PYgHn2nRn2r8sysa3jpVnMzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172462},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.31","@fluentui/react-theme":"9.0.0-alpha.23","@fluentui/react-utilities":"9.0.0-alpha.49","@fluentui/react-shared-contexts":"9.0.0-alpha.25"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.69_1632210051902_0.22127574818137363","host":"s3://npm-registry-packages"}},"9.0.0-alpha.70":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.70","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.70","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"7864b963f23583eb2dacfeeb09e48795cf556421","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.70.tgz","fileCount":43,"integrity":"sha512-n/7YE4NFYZ5RR8kLY6Rj0/vjUIi0TfEbgu8fIfiAdn0LcOrOwDLP+qlW2FTT4SB6lseey7Ql3bfqvR+tdjsYeQ==","signatures":[{"sig":"MEUCIQC3TJsYP+z3N3mXNEqr/Dg0SZc3nx374ce5elAfIHKpDAIgGHVmEIYNcsmXAaquV/V5ffFIk+dW+4zOCdGEX2ND6VI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":140000},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.31","@fluentui/react-theme":"9.0.0-alpha.23","@fluentui/react-utilities":"9.0.0-alpha.50","@fluentui/react-shared-contexts":"9.0.0-alpha.25"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.70_1632305354369_0.11398570477437175","host":"s3://npm-registry-packages"}},"9.0.0-alpha.71":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.71","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.71","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"a59aefed3e915eda7e0f9abe974a5aadc43375cf","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.71.tgz","fileCount":43,"integrity":"sha512-qmEks12vWlueMLQtvbXd5uGyFpCPHVGbSc28xw4bPYD13sdA2R7boZf5t0v/uZUi/zrio2sFEMyXw7AexGrRpQ==","signatures":[{"sig":"MEQCIE2urzP0uD4sokuA5VEMJKJ404yE/N7VMW5Th7KZxix3AiAUIW+LsWdRACNKmcvDp9hEDj0CfxVeRilzn7bXxdKCFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":140943},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.31","@fluentui/react-theme":"9.0.0-alpha.23","@fluentui/react-utilities":"9.0.0-alpha.51","@fluentui/react-shared-contexts":"9.0.0-alpha.25"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.71_1632385238636_0.18871445316903013","host":"s3://npm-registry-packages"}},"9.0.0-alpha.72":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.72","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.72","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"1e4a52253b66a998d2796428d8cb2740374981a7","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.72.tgz","fileCount":43,"integrity":"sha512-eXQPBLAWEZLuoBUl7Vcamoho/TE3O6FvigEl9AM0qRKLFy50LgbQ5T5nnShXOvALq0/n+jCC5atkxJwzTCMLBA==","signatures":[{"sig":"MEUCIQCeb7sFanXsdk/JrOAADSrCPj1Y5/OV7eOJ/DKGENwndgIgWmUo7pz6uO5rvjrKOA2xhnyhY8hMwj/l5xsvWVb+qPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141852},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.31","@fluentui/react-theme":"9.0.0-alpha.23","@fluentui/react-utilities":"9.0.0-alpha.52","@fluentui/react-shared-contexts":"9.0.0-alpha.25"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.72_1632474985976_0.01163498808496688","host":"s3://npm-registry-packages"}},"9.0.0-alpha.73":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.73","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.73","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"9d450f1d48f4e840b3c07a182e2a242cc75f2b8a","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.73.tgz","fileCount":43,"integrity":"sha512-Ml71mzDefnFsFDAOFftgZ8VPnGXtXkDskmhar8SfUG6Dy0VLhWl1B3LMBRPIvICBWa3EYJhFWzpmeBsnzzgS6w==","signatures":[{"sig":"MEUCIDyOKsNIkwOlieKaGJ5h9N8fNIe9/uWaeSn+yXVeuV9MAiEAtgDVR+wR9LGVmzajHUme5EHwyNlPA35Fuypb64glAfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143205},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.32","@fluentui/react-theme":"9.0.0-alpha.23","@fluentui/react-utilities":"9.0.0-alpha.53","@fluentui/react-shared-contexts":"9.0.0-alpha.25"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.73_1632729910913_0.0914348289159177","host":"s3://npm-registry-packages"}},"9.0.0-alpha.74":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.74","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.74","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"5947d929655a2fbb66e460a49ec45bc065e2c6c0","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.74.tgz","fileCount":43,"integrity":"sha512-4Jgs0il1ew/GN07iid99stI0ZpGRybkCOtIQzof5kcswOaNNpD0QpYIYHAmTeALkID163NfwP43NmWK5pIzNjg==","signatures":[{"sig":"MEUCIBuK6pgIK+Pr70WalIMbVG5BTDQ/qlOxLKzcfteMnybMAiEA3mSHQLEWuhRldKSsv2HcxUE+imoNDLWKU1eegL9LTxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144434},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.32","@fluentui/react-theme":"9.0.0-alpha.24","@fluentui/react-utilities":"9.0.0-alpha.53","@fluentui/react-shared-contexts":"9.0.0-alpha.26"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.74_1632902722583_0.058169461113151355","host":"s3://npm-registry-packages"}},"9.0.0-alpha.76":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.76","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.76","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4a70b0db9189ae74fdf4018cfc67193e0b5cfec5","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.76.tgz","fileCount":43,"integrity":"sha512-iwLMmja35YCO3ClvuDE3DPoWvgGccW0+iIIzNei6C20IjnpFIyNGandMXu9OtXUZopl1g7onunlYLbzVgiDYEw==","signatures":[{"sig":"MEQCIF9wTRjd8bkyuVSAbb0Znv/TSJ8d5jnE0ImworZbPqGKAiA0jgg2nqDzd+Q0t6+nTk/iXJ87S+tirFwfMdm1/qmU5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":146868},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.34","@fluentui/react-theme":"9.0.0-alpha.26","@fluentui/react-utilities":"9.0.0-alpha.55","@fluentui/react-shared-contexts":"9.0.0-alpha.28"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.76_1633097535026_0.13407333027402046","host":"s3://npm-registry-packages"}},"9.0.0-alpha.77":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.77","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.77","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"920ef7dfdda8146f8a306988d590be10c515ff77","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.77.tgz","fileCount":43,"integrity":"sha512-oiShE3E/pW89pGdoQyLdCPRq/9peseZIcUh2hor6sCGjNdztI9JhVHSFr6lzkgExdUwkfCoPO0YAu7lGFIT6gw==","signatures":[{"sig":"MEYCIQDfqWslLjjMVdziYbErx/C8v/k5yGn9XHfqUcE9Hjgy2gIhAJbZoEQzybu6TeNDcSoCbdVQX1QP/lALmHOo+jzsgN7U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147777},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.34","@fluentui/react-theme":"9.0.0-alpha.26","@fluentui/react-utilities":"9.0.0-alpha.56","@fluentui/react-shared-contexts":"9.0.0-alpha.28"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.77_1633426027772_0.5945826012528184","host":"s3://npm-registry-packages"}},"9.0.0-alpha.78":{"name":"@fluentui/react-make-styles","version":"9.0.0-alpha.78","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-alpha.78","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"21eb42632ac59164f9482ea304c42b6959752a9c","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-alpha.78.tgz","fileCount":43,"integrity":"sha512-CEFZ1ubH6Uhfv1BenZ4j09Rdf8aPLwbS8EnekZUpmUrtOCvmXlh03zyK3FJ22hiMRomaHFNi+blBHdVlULibgQ==","signatures":[{"sig":"MEUCIQDp9VMkr335GoSnCxO9l1XOyyNwRT4AAoD1lmhYTwO25wIgIglOgdnAbNBBEAczkZqhL/f8cc4sC/g+3xCw6V8i7WU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149720},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"alpha","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-alpha.35","@fluentui/react-theme":"9.0.0-alpha.26","@fluentui/react-utilities":"9.0.0-alpha.56","@fluentui/react-shared-contexts":"9.0.0-alpha.28"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-alpha.78_1633438028603_0.5627794646809623","host":"s3://npm-registry-packages"}},"9.0.0-beta.1":{"name":"@fluentui/react-make-styles","version":"9.0.0-beta.1","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-beta.1","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"62e24d9b402393f79d065d6751a79d926797b34f","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-beta.1.tgz","fileCount":43,"integrity":"sha512-r9eJ6hPdG9J/rnB/rUxGcUcxdD0hbY/0jaJv4RFMC8AVbedomUR+QHHBmuUTfG04im+C6SJhUU3Dt/KTvU+snA==","signatures":[{"sig":"MEUCIHzSegraBJ1lO2aylLlDATVdTwrDcw9XU5SWx0QS2+zOAiEArxru9mZ/yq5tPEaAlI6amJU4E+sSICkO7kT808l7aes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152142},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-beta.1","@fluentui/react-theme":"9.0.0-beta.1","@fluentui/react-utilities":"9.0.0-beta.1","@fluentui/react-shared-contexts":"9.0.0-beta.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-beta.1_1633516586793_0.2752038265785328","host":"s3://npm-registry-packages"}},"9.0.0-nightly.f81b28ceb3.1":{"name":"@fluentui/react-make-styles","version":"9.0.0-nightly.f81b28ceb3.1","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-nightly.f81b28ceb3.1","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"93d0c6feb373741c9bf6baa93cadb3d85145df58","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-nightly.f81b28ceb3.1.tgz","fileCount":43,"integrity":"sha512-ClR5fL9kBiDMYUl28SFpiiZFNXL6isPDCYvHAriqm3ceO1FSjmgaJ/dwCk9/pVtSIPE9K47XXVvFjV3fd7a5xg==","signatures":[{"sig":"MEQCIBVsCQP4TSKdADu8IhAzN1qCYM4bOMMhANYtbq1npr0YAiBnTvOpnR0RIWXXEgkl+4LT16O6CGcmjK4zrhh2nXao3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154931},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"deprecated":"bad publish, use 0.0.0-nightly in the future","repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-nightly.f81b28ceb3.1","@fluentui/react-theme":"9.0.0-nightly.f81b28ceb3.1","@fluentui/react-utilities":"9.0.0-nightly.f81b28ceb3.1","@fluentui/react-shared-contexts":"9.0.0-nightly.f81b28ceb3.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-nightly.f81b28ceb3.1_1634647184804_0.7897002069752408","host":"s3://npm-registry-packages"}},"9.0.0-nightly.d730088d7f.0":{"name":"@fluentui/react-make-styles","version":"9.0.0-nightly.d730088d7f.0","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-nightly.d730088d7f.0","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"6f2bffa687d391c5a05c79ec406a2e8b56eb3af7","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-nightly.d730088d7f.0.tgz","fileCount":43,"integrity":"sha512-nJRLt4ak56t+7KIEPvZL7BUmKVg6h9bMNnQShYEvgVXYPg9KLFQNq9vgKgh7tyZFksphwgUMdYVDRxsDYj2xhw==","signatures":[{"sig":"MEUCID9c+R5O0u9B+o7DKCZQOdQh37QGu/HNS1/IHDoUtLvsAiEA0kB2qGg04mbdsm2EJoq3ZvJoJ8wPv7N16RZAIuFFZCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155325},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"deprecated":"Bad publish, use 0.0.0-nightly in the future","repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-nightly.d730088d7f.0","@fluentui/react-theme":"9.0.0-nightly.d730088d7f.0","@fluentui/react-utilities":"9.0.0-nightly.d730088d7f.0","@fluentui/react-shared-contexts":"9.0.0-nightly.d730088d7f.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-nightly.d730088d7f.0_1634721604492_0.3233025100207976","host":"s3://npm-registry-packages"}},"9.0.0-nightly.25435def33.0":{"name":"@fluentui/react-make-styles","version":"9.0.0-nightly.25435def33.0","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-nightly.25435def33.0","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"621046914e50c036873ff7d6ca165d22b39275b0","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-nightly.25435def33.0.tgz","fileCount":43,"integrity":"sha512-ljJjm7SuvPVLgs63e7MxEcFw924Y5+I3pzenAMMJCKuJL43tckwad1hriNY5yxKqK/qtR4wEnocr/6BflaFb1A==","signatures":[{"sig":"MEQCID1Y1vgotV+UjMDWv0ttlgqvTT8fwSDRGRwrklTmFTXGAiAGrF4sL0KKUX4ZdkjlJVPP4lnmlLOd7p0cVNWrgXJa2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155325},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-nightly.25435def33.0","@fluentui/react-theme":"9.0.0-nightly.25435def33.0","@fluentui/react-utilities":"9.0.0-nightly.25435def33.0","@fluentui/react-shared-contexts":"9.0.0-nightly.25435def33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-nightly.25435def33.0_1634807920303_0.6859843712681484","host":"s3://npm-registry-packages"}},"9.0.0-nightly.1df0025867.0":{"name":"@fluentui/react-make-styles","version":"9.0.0-nightly.1df0025867.0","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-nightly.1df0025867.0","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"7768cb03da1136c37c59ed8c55073dc8bf1700cb","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-nightly.1df0025867.0.tgz","fileCount":43,"integrity":"sha512-h/YVC7lY5ds48VPv4QnOb9+8az8MCge8rH7rxzw/PWO/9ZgzWeGzT8U+VHu9eQBFHkqxEm1MQ8nQArGk7arqAQ==","signatures":[{"sig":"MEYCIQC6770HQPn8OcnZ8arsYppPqn73miFrsQgnYpKidY8gmAIhAPAysxWC7sKK3gE76C92u6J9yMBk7UQWXf6SsAzemCxk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155325},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"deprecated":"Bad publish, use 0.0.0-nightly in the future","repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-nightly.1df0025867.0","@fluentui/react-theme":"9.0.0-nightly.1df0025867.0","@fluentui/react-utilities":"9.0.0-nightly.1df0025867.0","@fluentui/react-shared-contexts":"9.0.0-nightly.1df0025867.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-nightly.1df0025867.0_1634894220920_0.22502713268029972","host":"s3://npm-registry-packages"}},"9.0.0-nightly.46b9ea7036.0":{"name":"@fluentui/react-make-styles","version":"9.0.0-nightly.46b9ea7036.0","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-nightly.46b9ea7036.0","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b182438684618f2f23315fbfda18201c1904595b","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-nightly.46b9ea7036.0.tgz","fileCount":43,"integrity":"sha512-Z9ni8rFEdoEOWG5cPOVXVW19Jq8EfRPXtEvvPe4cEAGTU5YlhPR43xo5sUz1nM8fpc6ihmCaz/KktAPilYn1yw==","signatures":[{"sig":"MEUCIQC61qx8PYoXJvTvTkf3fAYOewOtIGwjr/VICmFLTQAWHgIgDYeDECj2r6MteqLmrTtLDg0ZmnBmJsgJQOaFF842UOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155325},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"deprecated":"Bad publish, use 0.0.0-nightly in the future","repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-nightly.46b9ea7036.0","@fluentui/react-theme":"9.0.0-nightly.46b9ea7036.0","@fluentui/react-utilities":"9.0.0-nightly.46b9ea7036.0","@fluentui/react-shared-contexts":"9.0.0-nightly.46b9ea7036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-nightly.46b9ea7036.0_1635153495332_0.12610227297947674","host":"s3://npm-registry-packages"}},"9.0.0-nightly.b5b7401007.0":{"name":"@fluentui/react-make-styles","version":"9.0.0-nightly.b5b7401007.0","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-nightly.b5b7401007.0","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4f359928b077e74c0a959213943071e06f1aef03","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-nightly.b5b7401007.0.tgz","fileCount":43,"integrity":"sha512-+3fj/6ZG3CA+IFiuTuYvOFDpDdLZHMbZ8bUZygry2h7Z7OKHK4hrEILv8kJaDl+qfHvzHwO/L/RAgN1p9ziM6Q==","signatures":[{"sig":"MEQCIDBTmmXcB1lJ9ShRWb3qhBt0NcnSfrcaRo0Ya8mf3m6fAiBuyb228jIYK+L9C6puOm3qdhVVc9g+3TWIX1lJBPWjgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155325},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"deprecated":"Bad publish, use 0.0.0-nightly in the future","repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-nightly.b5b7401007.0","@fluentui/react-theme":"9.0.0-nightly.b5b7401007.0","@fluentui/react-utilities":"9.0.0-nightly.b5b7401007.0","@fluentui/react-shared-contexts":"9.0.0-nightly.b5b7401007.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-nightly.b5b7401007.0_1635240237220_0.15479085263257497","host":"s3://npm-registry-packages"}},"9.0.0-beta.2":{"name":"@fluentui/react-make-styles","version":"9.0.0-beta.2","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-beta.2","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"a3128abea8bd22754893ba3021e474c742670a86","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-beta.2.tgz","fileCount":43,"integrity":"sha512-CiywBEEledQGgPYG2be9itlukvaz8NrPXwC04yvy/vdw2T5nuT43aEX5Y/oKBZ0A0OMzWV7sEZTENJg0nrFa4g==","signatures":[{"sig":"MEYCIQCxHEzY4WI4tm5NT8mGOmmHfuD0klLUv2dY+vx0fUiFrQIhAMryBJMvE9cssLm2pGg2uGxtvfC5gFgjuFXAOrWN3kpZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154531},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-beta.2","@fluentui/react-theme":"9.0.0-beta.2","@fluentui/react-utilities":"9.0.0-beta.2","@fluentui/react-shared-contexts":"9.0.0-beta.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-beta.2_1635336778591_0.12568295647517624","host":"s3://npm-registry-packages"}},"0.0.0-nightly0e0cf06c3420211029.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly0e0cf06c3420211029.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly0e0cf06c3420211029.1","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"e399abdadc16d637c74417cb1c8d94e0b6c17639","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly0e0cf06c3420211029.1.tgz","fileCount":43,"integrity":"sha512-M0g8cH43H59ps9R2jKVAvi7b+4cWq3SJGE8kCVV9yAx2HQDnQoB71IuO4t/xXxvU05ekk051R9qt4Pyqn+6jgA==","signatures":[{"sig":"MEUCIBv/zlH9O/S9D520yXpikun/rFGHIPDIO3snTQ8Y9dsBAiEApT3eUD/er3Rl04z7dbCvuDkRPQyH2q06xUQZsYM7Isc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157446},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly0e0cf06c3420211029.1","@fluentui/react-theme":"0.0.0-nightly0e0cf06c3420211029.1","@fluentui/react-utilities":"0.0.0-nightly0e0cf06c3420211029.1","@fluentui/react-shared-contexts":"0.0.0-nightly0e0cf06c3420211029.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly0e0cf06c3420211029.1_1635489632553_0.042330632943083035","host":"s3://npm-registry-packages"}},"0.0.0-nightly050f89bf0020211102.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly050f89bf0020211102.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly050f89bf0020211102.1","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"ed108fd5c0b65b4689189fd2cdc168b99e3171f0","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly050f89bf0020211102.1.tgz","fileCount":43,"integrity":"sha512-T/AvC6DXiAE01QmLLYwX06vo+vsmAc7pZC9C0XZo8ke1CcUaBAPU66CdVEkcI9vqCPA8zvb41Q/OjuzhZlMquw==","signatures":[{"sig":"MEUCIQDfvu5GCeuOnYdAkHim8U31P0Q/9UrnHWghpz89G1m3swIgWek7bz3HsihuC8fJ6w8kYZVlwC3ulj4W4TeQxhrHecE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157446},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly050f89bf0020211102.1","@fluentui/react-theme":"0.0.0-nightly050f89bf0020211102.1","@fluentui/react-utilities":"0.0.0-nightly050f89bf0020211102.1","@fluentui/react-shared-contexts":"0.0.0-nightly050f89bf0020211102.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly050f89bf0020211102.1_1635842490238_0.33117767274387333","host":"s3://npm-registry-packages"}},"0.0.0-nightlya372ad979820211103.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlya372ad979820211103.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlya372ad979820211103.1","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4aae1e75a04d8908858c6ab90a129ba0e7096fca","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlya372ad979820211103.1.tgz","fileCount":43,"integrity":"sha512-hhDE49fLDFXtgZ+VrBmeQoD/a2chtukciZ3pz3nGZEhngJdwmFae9DS9h5gvYnGLGV8Vp4JMJlmibaG5yfCz2g==","signatures":[{"sig":"MEQCICPMZ/GsAZlBtebcCkd0Wm5DxAf/ZrUo1daxSYvvEEqbAiAmu18LvuooAALHkpCEj4Yfs8QMjr96PV4ZR+6aUwAXwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157734},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlya372ad979820211103.1","@fluentui/react-theme":"0.0.0-nightlya372ad979820211103.1","@fluentui/react-utilities":"0.0.0-nightlya372ad979820211103.1","@fluentui/react-shared-contexts":"0.0.0-nightlya372ad979820211103.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlya372ad979820211103.1_1635927888897_0.8024553610529095","host":"s3://npm-registry-packages"}},"0.0.0-nightlybc5ff01fb020211104.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlybc5ff01fb020211104.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlybc5ff01fb020211104.1","maintainers":[{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"859260c9f32555c42d82bbcfaad18a0d0171be6e","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlybc5ff01fb020211104.1.tgz","fileCount":43,"integrity":"sha512-QEIp4yy77gzNA3RdUKfsGvgKDQvE3Gxn7VYMsssslkgvxmFxRjnNH6wMBwPIejuTWZu9EpxnRh9aFN0PqLg7kw==","signatures":[{"sig":"MEYCIQDCPKUJw4ReeRGT8ZlglV37TP0WugI/leuvNuWG1g1gWAIhANtH9lxUBG2QpSwjI7k1/Tee1NpzIidiAC1zvIrmicOH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157499},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlybc5ff01fb020211104.1","@fluentui/react-theme":"0.0.0-nightlybc5ff01fb020211104.1","@fluentui/react-utilities":"0.0.0-nightlybc5ff01fb020211104.1","@fluentui/react-shared-contexts":"0.0.0-nightlybc5ff01fb020211104.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlybc5ff01fb020211104.1_1635999687447_0.7252318892880909","host":"s3://npm-registry-packages"}},"0.0.0-nightly01492e29df20211105.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly01492e29df20211105.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly01492e29df20211105.1","maintainers":[{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"83e2ed6965f82ab1eb73024215d6bae0795c123b","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly01492e29df20211105.1.tgz","fileCount":43,"integrity":"sha512-PnPXYu6lClgMyMhc2pJ+1tlEmH0ftUUZ/GwzKTNM6blK0MpnhZU72yeLUMUq9+jnhG/mAw/iOX81MMw3nBfCmA==","signatures":[{"sig":"MEUCIH+lUphw4sRZTH+y0v1Vza5CbWL+2/UXBkY4Lmkf7imQAiEApTrQ/ZfMm56wr82WKm9duVSRTmE1bBWCJCiw6d80ukU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157499},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly01492e29df20211105.1","@fluentui/react-theme":"0.0.0-nightly01492e29df20211105.1","@fluentui/react-utilities":"0.0.0-nightly01492e29df20211105.1","@fluentui/react-shared-contexts":"0.0.0-nightly01492e29df20211105.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly01492e29df20211105.1_1636085814718_0.3980167678493429","host":"s3://npm-registry-packages"}},"0.0.0-nightly0025eeb82020211108.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly0025eeb82020211108.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly0025eeb82020211108.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"387b466c51fc2cb595c7c6cf7f2bb47bebda210c","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly0025eeb82020211108.1.tgz","fileCount":43,"integrity":"sha512-+OecjF94gnfFv2KfVZD/yhvgDqmImNhNHGp83oclBsR+FD9nqAtDuKIHqlxzFTM2mPCdMIqjZN18r+r8FKizag==","signatures":[{"sig":"MEQCIEZ9TWjxzcBIYM9eSvhAwuTdNz8Ld7/1R4G+QZgrodtXAiBTUjfqXiOCDaShYyh0yejd5S7wf6WBsrOJjjaKLXKGyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157499},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly0025eeb82020211108.1","@fluentui/react-theme":"0.0.0-nightly0025eeb82020211108.1","@fluentui/react-utilities":"0.0.0-nightly0025eeb82020211108.1","@fluentui/react-shared-contexts":"0.0.0-nightly0025eeb82020211108.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly0025eeb82020211108.1_1636345069569_0.24932055126581187","host":"s3://npm-registry-packages"}},"0.0.0-nightly627ad67f1120211109.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly627ad67f1120211109.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly627ad67f1120211109.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"ffd2ac5f57bb5aef83c0d89fc69d1e0999700d90","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly627ad67f1120211109.1.tgz","fileCount":43,"integrity":"sha512-yIbgsArtMaw8bwfP48l0CJjCT3NQFaHyQ/PsVt0jUFouiW+ewb45aKVKvEgpkGskNBp0zdXzlBJwT/dTHsy2qA==","signatures":[{"sig":"MEYCIQCz75BV6rnbsaPvkXwXoHflWI5BHnXI9L6+Oz+pCFXYeAIhALkiUMQyVz2h7kYTJGRvsykmRcSj/oHa4Skk+8SAxafZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157499},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly627ad67f1120211109.1","@fluentui/react-theme":"0.0.0-nightly627ad67f1120211109.1","@fluentui/react-utilities":"0.0.0-nightly627ad67f1120211109.1","@fluentui/react-shared-contexts":"0.0.0-nightly627ad67f1120211109.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly627ad67f1120211109.1_1636431684512_0.34715100224540185","host":"s3://npm-registry-packages"}},"0.0.0-nightlyf3ce1fbe1d20211110.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyf3ce1fbe1d20211110.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyf3ce1fbe1d20211110.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"60f122663a49b97b5c68053801490e2d46678743","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyf3ce1fbe1d20211110.1.tgz","fileCount":43,"integrity":"sha512-hJcWjftOIFMMXn/7b9GwEvX/mxF8yo4GjuzUaYNKZnsuhow1NERGqPBODeUPVZUz1Oig7ZxJf8Ma3UfywvlG3A==","signatures":[{"sig":"MEYCIQDWI3m+WPVYqU+0Up3b2bRSl2KEeKyTwX0eGOBpX6sZGgIhAI8WlFc7heZxaQ+LPpa7r5khscV6zKr9/IKMgU2ehuFz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157499},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyf3ce1fbe1d20211110.1","@fluentui/react-theme":"0.0.0-nightlyf3ce1fbe1d20211110.1","@fluentui/react-utilities":"0.0.0-nightlyf3ce1fbe1d20211110.1","@fluentui/react-shared-contexts":"0.0.0-nightlyf3ce1fbe1d20211110.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyf3ce1fbe1d20211110.1_1636517869048_0.9038946898882332","host":"s3://npm-registry-packages"}},"0.0.0-nightlyfbae36b19b20211111.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyfbae36b19b20211111.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyfbae36b19b20211111.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"e18b07e6e421c4d837f2bb0f68765cc3fbe16e14","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyfbae36b19b20211111.1.tgz","fileCount":43,"integrity":"sha512-x7lRYkQHlzCTrlY6iLg9yIRu17XF/lCJCxNfsYE2tGWSSOgc8kZt+OiqCwl7ILHyxCKUIoKERBEIaejs0YRlUA==","signatures":[{"sig":"MEUCIFZeXyfGzScjarYKqrnktwefzdaKwo6F3/cu9LSYxXhRAiEAop5RZaLNHK/F2BBoMa3HAukC4Y7J8xN/85XMRJ19Dyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157499},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyfbae36b19b20211111.1","@fluentui/react-theme":"0.0.0-nightlyfbae36b19b20211111.1","@fluentui/react-utilities":"0.0.0-nightlyfbae36b19b20211111.1","@fluentui/react-shared-contexts":"0.0.0-nightlyfbae36b19b20211111.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyfbae36b19b20211111.1_1636604399424_0.1278705120024537","host":"s3://npm-registry-packages"}},"0.0.0-nightlyed2d7c8d6320211111.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyed2d7c8d6320211111.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyed2d7c8d6320211111.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"8bd42d828ad0da0f4c16cdd890fd24fc8e3dac08","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyed2d7c8d6320211111.1.tgz","fileCount":43,"integrity":"sha512-0vkZHqBBgNqSDPGUdfIdFCUY/mAwXb4vcuMnmPVFnZoG/3GhE8N1xwG8rIFomvnl4n0WlhrECt+eNXcLPqg4Yw==","signatures":[{"sig":"MEUCIF4TYjcLXMAdeXNCUwvTnafBQawUYx6idBsb2l0NZ7pkAiEArjP5Tz2HBSgVqc6bg3dNurP2QNmzQJLxPcFg7vSv0ZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157499},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyed2d7c8d6320211111.1","@fluentui/react-theme":"0.0.0-nightlyed2d7c8d6320211111.1","@fluentui/react-utilities":"0.0.0-nightlyed2d7c8d6320211111.1","@fluentui/react-shared-contexts":"0.0.0-nightlyed2d7c8d6320211111.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyed2d7c8d6320211111.1_1636636425926_0.4950095869670754","host":"s3://npm-registry-packages"}},"0.0.0-nightlyfe9829e48120211112.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyfe9829e48120211112.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyfe9829e48120211112.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"62b6036d9c253335077728a81fc31f039d331d91","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyfe9829e48120211112.1.tgz","fileCount":43,"integrity":"sha512-nst5mLSGqa20bJTbhD6sK39u0AAuZdPD/CU+Xm4Njb1gqs5vEJavKuLhS3GJvJLye9c0n1tqJdQ/4xiEKOVTBg==","signatures":[{"sig":"MEQCIG5CEBkIYl2DwK9NPRsHeXpS+vuzLrV6mII40auEsArHAiBvo+NUItNT94m9IWNlN2ynZDpGmLGgG4uAZEy1FbU19w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157499},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"tag":"beta","disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyfe9829e48120211112.1","@fluentui/react-theme":"0.0.0-nightlyfe9829e48120211112.1","@fluentui/react-utilities":"0.0.0-nightlyfe9829e48120211112.1","@fluentui/react-shared-contexts":"0.0.0-nightlyfe9829e48120211112.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyfe9829e48120211112.1_1636690881586_0.23067504623036217","host":"s3://npm-registry-packages"}},"9.0.0-beta.3":{"name":"@fluentui/react-make-styles","version":"9.0.0-beta.3","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-beta.3","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"6ae27145484af58b1c853cdd5ef3fb7f4e40c1af","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-beta.3.tgz","fileCount":43,"integrity":"sha512-YS+Hd64bAdMDpAtI+U9hkXxjoXXe6mqybpfGiheRTv546f9aivplMr+j3k5PeWRBS4zt/IYF5va/3MU0SqWYnA==","signatures":[{"sig":"MEYCIQCX1V/MbFLtvtQH8SA1taiydrJvCYNGxiNoltMK7k+gCQIhANYbuwdXtJ1DW3BODlPMNreqN0IjoiV7pOPmOFVGvdoj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156464},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-beta.2","@fluentui/react-theme":"9.0.0-beta.3","@fluentui/react-utilities":"9.0.0-beta.3","@fluentui/react-shared-contexts":"9.0.0-beta.3"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-beta.3_1636720463472_0.8490996635740402","host":"s3://npm-registry-packages"}},"0.0.0-nightly906d31cfa320211115.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly906d31cfa320211115.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly906d31cfa320211115.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"173649f1d1b91dc63da97445f61238076cb4e3ad","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly906d31cfa320211115.1.tgz","fileCount":43,"integrity":"sha512-8VC3ohb0Suy7atLFxqARGZ2GwBVRdPnNGBIXkWrzWZxidoHeX7nPp7xxfO5vGwDdajxMwwp+S2HgyWQdvdKiww==","signatures":[{"sig":"MEYCIQDm6GErs3EOC8ayKS2KTcIzK3hbMJ3hLp+0AEsCqPNX8AIhANYA+Zw9RCynhtyR+9iwgGspRM7X4SVWM1U1+wNwR4zM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159379},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly906d31cfa320211115.1","@fluentui/react-theme":"0.0.0-nightly906d31cfa320211115.1","@fluentui/react-utilities":"0.0.0-nightly906d31cfa320211115.1","@fluentui/react-shared-contexts":"0.0.0-nightly906d31cfa320211115.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly906d31cfa320211115.1_1636949823007_0.0638501156062552","host":"s3://npm-registry-packages"}},"0.0.0-nightly9edaf68d4420211116.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly9edaf68d4420211116.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly9edaf68d4420211116.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"772e5a9e805b755f83a7c3bc4152096d0a3fd325","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly9edaf68d4420211116.1.tgz","fileCount":43,"integrity":"sha512-pTO9IvS7eY9PvYdOsns1RjEmil3gz/Gt6HQ4dyR3Vz2Lbx2ppwFzQRuJoq2J86joRcWMC/3d/C4nhpRTI9vmag==","signatures":[{"sig":"MEUCIE1QsueKnneetwcJJWIqwAsv9wN4seQfpc5lDjNNlLfWAiEA8yVBztohijRTZWl442vrt4BrsGp33avhK8L6Iy+o/oc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhkzE+CRA9TVsSAnZWagAAc1EQAJhk/8o/YntUyIQukNiU\nJWkM/vi/fcEhtVDJ4nade5JkUwlOgoy9Ml7qkaRMlZDJiE/0r4bxsXemzLx7\n/E+B9aiQF411wTrdlA+g9No15P7L9kWdk4eZ++UZXxPvWy02XHIX7OmoY1xx\n5OAJN+SODpKj2yls0GaKUiRhxSCyWCZzccg2fA0PsRBc0Cvzf8zL9IsL99jC\n94y6jVesmRC5sAfoygynN5Ovo0o8kvtpKlQb3FQqxwqXruH1PJL+TrE2vaIx\nQ+08hgHfsmde26L0fpDCrV9+Vt+5HyhhjS26MLYNiE5EpK4oHGSvzY8RqqRw\n/ZLVoybQeJhuGntVxrWkRIRvYFwgnD1BXmKsl7I/n07s4JSlu2tB8mC265Wf\nzcePIu1MKIHZgTULTvsfLxcLk6nYXT3jAhWREoYhAyyZQgHQMBXRY1gIZlez\nUa/tQUBHu12+pmuzVotcA3xsPG1CJg+OacAVH8rssQwUiNVPnJ9oajQj01lH\nIrPg8wBH+7gj7cG1ShyeIUX3lTN0TQ/9mbZ9O97TuRojMMnTs750DEo+tKrw\nL5Ys64R/QlfUJzkituSwEbJInuEC5D9OubeRhVKC9tILJKLl579dbyUjmAbe\nticYCW6s4A+dnEuCwunuPfe6JqaDTMk96A0eYOzEcaGPXhMeVNpUmfoEWDwl\n8tSq\r\n=qahB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly9edaf68d4420211116.1","@fluentui/react-theme":"0.0.0-nightly9edaf68d4420211116.1","@fluentui/react-utilities":"0.0.0-nightly9edaf68d4420211116.1","@fluentui/react-shared-contexts":"0.0.0-nightly9edaf68d4420211116.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly9edaf68d4420211116.1_1637036349884_0.285626929646394","host":"s3://npm-registry-packages"}},"0.0.0-nightly8825574c4220211117.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly8825574c4220211117.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly8825574c4220211117.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"2288831fd4d9b82a38888cf4b351337d85fadc4a","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly8825574c4220211117.1.tgz","fileCount":43,"integrity":"sha512-9VQ/huHsDS62CluvfyT1E85KwRTljZyJ0fZsT60ABuur7xSJCON2GIbw9cSVSzGYDJKXzTQWPqzXlegE0chs+g==","signatures":[{"sig":"MEYCIQDWr+26NB2CLkift5FW9pjnQuTkqZsNV404ATLApEFVHwIhAMk+5bIjNS67nSebNTr830Co2VHUd86AgPIIjf8Tw/RC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlILFCRA9TVsSAnZWagAAWgoQAJnPV9AzykF4pKgANb2V\nlSyYaJaLuAaXXCfJNDvHwnu4MvvbK2Gusdu1lRBcVp16TsMqJ0uWCP8vsQjx\nNw9vGFlS1uJgX3Rz+ZFltpoxWsSQ/nWulvBM+Xj6HU74IUuRKYDQ88MkgvR2\nv7XESkngl2U8QBILLpR+3q4CU44JXxF1sSNlf3dJQPeLrvdPuXgmCsrgq8NA\nkLHiinto9N4UGyu1rhbPPlZ2WqLW+nXMjEZ2En1CHzjqffsi5zcpvxI7kEJ1\nol2gC6cLYaAcdM5itHHY5VwKmPnoBqxvYoxj+EnL7XH5veWbj0nI8LdT165n\n99EwXkbEdRCFgrDnNQLydFnrx5c7BKRy0XVyuAp1Kw3k3np/Fwm64ruiqrzW\n+krkSgfFMgZG18apuEpD3ejgYyArHaBbzNE2a4bd6Adn7RHJODmyBSAAK1WE\nixyZr1stJx93Wyo7TX/TDbYjSW5eJ7HUwqIW83ZkFWQyD86lflOud5A/AWfH\nX3xA724HDdtzKDCMmBED+/dQm26+LnPPxsYt7H40wC2tuf8cuQD6W+eXd9BJ\nNAVHp8n8VoKxtYKQ/5NN0a3o0EF+6+M+sa11F6y4iTSoJaW9pK96I1kCyxDr\neAsilu17SQ4NjjXikVpLJqDwZF5IBsUNrlIffcEEzICFgXdwlJeR3E4uRukB\n047B\r\n=vXta\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly8825574c4220211117.1","@fluentui/react-theme":"0.0.0-nightly8825574c4220211117.1","@fluentui/react-utilities":"0.0.0-nightly8825574c4220211117.1","@fluentui/react-shared-contexts":"0.0.0-nightly8825574c4220211117.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly8825574c4220211117.1_1637122756921_0.4169490776815088","host":"s3://npm-registry-packages"}},"0.0.0-nightly8faa94d11420211118.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly8faa94d11420211118.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly8faa94d11420211118.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"12d821105f54cebd8736c6fd4eb9dcb5d8a91c3c","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly8faa94d11420211118.1.tgz","fileCount":43,"integrity":"sha512-mSXiJ+8G3irv8rKr5YJzwmVN1psDNUeG786ymI5S5c1kDdRihyKQXWxagsYW3AMRk9Rcby8lzSxcm4foR2Hrxw==","signatures":[{"sig":"MEUCIQCNNalrPb2Y/HeJeCsGKRyWMhCtqx3Yx+t6diAGlT309AIgQetbjAkVCL4Dp5GoakFqCgYiWzIcAoDDleZUqrdr510=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhldRSCRA9TVsSAnZWagAAe5wP/2yBm1S4+laVMtnkZis7\nsy5lwrQ/ynNxuOw8LTt0xrsE93l3PiwKDD8TdcxaKC81F/s4Mp1ctm5r98zh\nNRkDks6E9dFZF29W8Bl8PDnIaKXxbaHqi2bbC8I1UTv2yGP89HQBiugiUEH5\n9VXHW2GELl3p97T7SgbYfgHtPXZXHX1mnS+dlYLBwAjThU7Ye08ixdSzU5nf\ncq8r5NhyGuDYDqdh0zcKbNAKz9wAcHix+r5Jb2Ai+/LGZfKkRsZh7Drfjr+r\n7YT/qqwjY3OtN58175eYxuGSeIX1OTKZHOcE2ggrzpRwy77w4O7ZghmdTqU/\nrU+RkmATtN5yPIP8nnXQHbmbMaZq9xsGFaUI+FBSu0/meTub5dhoXhUpG4ns\nI7Z9RbALpqStcgAVum3PNwEaLwaSt0CAFSOYyAoSHKZxB4+KrB/jPreVVORd\nz+XGF2tGaJCrhhHbnIAng+ii2fESHMiLdVakwb2CwBbU44O8laGOAGpRwkhP\nnb7G1WLs+84IShA3pvd1E4WddZdNS8xHvXzJlHz0DKbts7pqemkV3u91711Q\nlCTQLuPWAsK6oCo58Qhzc4V5DGNxl8E+87QHaVznd7mGbnbk9fIkeaeed8/J\nu0rXDz5cIuXWVd6hyUwwiE024Sb1Hkf41sk0UYZx2Ee3vgBp0jnqre+fhsuJ\nTeie\r\n=mpbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly8faa94d11420211118.1","@fluentui/react-theme":"0.0.0-nightly8faa94d11420211118.1","@fluentui/react-utilities":"0.0.0-nightly8faa94d11420211118.1","@fluentui/react-shared-contexts":"0.0.0-nightly8faa94d11420211118.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly8faa94d11420211118.1_1637209169966_0.6028019744498609","host":"s3://npm-registry-packages"}},"0.0.0-nightly57a9843f2620211119.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly57a9843f2620211119.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly57a9843f2620211119.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3e5481093a33cab09699ce30d11d03e04f3d77c0","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly57a9843f2620211119.1.tgz","fileCount":43,"integrity":"sha512-erK4+eujd7jir3XB4xpE/Mecw5yvX8gfJXQjDhgT9HFDY5rhdrqo6r6dqytSrsvX0PD+61WTiGzphT2btI84Hg==","signatures":[{"sig":"MEQCIHE0zt+oOnS5yd0QPiB9h/GdZl/yXxlKwb8mks6KxopgAiBapxcOuAPsGoGlQyLju4CJrVrO4frmSqF7zDUiwePfyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlyXgCRA9TVsSAnZWagAAHbIQAIrVQ327WF5vjv5Uwk28\ne1+FT1zLVnqJgfRKnpV3oH/HTiiSvmQLkAch8Pv5qzOJ5DNXCtAPpoDsGP8q\nEeo3LDkcxYS/udPuoKOHTKqoj5bfzi0AaZXNGXSCVmMspUmIGmppjI7j0C5z\nXazK8yaXcgUbTEv7xEmTQ9gLqlwEL9TRX3cwzKSGSwfiZd3uoMvOPQIQ3knK\ne/wMKuDmpuAOhFic0rkROSvqiS5TC0PjkHz6aN4FeURDUWf5csuP76racBtj\nk4K+qYLkh5rxN2tP+40QAg3Pva9UO+Ssv+LCmCR124O6CoURQIm1fW9Hni0x\nVIEhqShW65fF+9U+1C/5yXP5dJlrHXwDrtkdeO/9unEOM8d6d1OkCanG72qt\n0KOpdGciSRSbqnjpcSUUZXObEFpiJ42pxq3J3iZxRn719XxSJ47srqTsol+Z\nRLIXdrbATlhiSq59u39VjPQdgXb7EJefslypiWYucO7lev9wpKM1NZ9ZZORV\naU2yVF2EKrzCzTI09HGvdhgUI5bNpnec+MxVWv//MtNMQO+CfTG58gPndJ8m\nwB/fI3HFX+ckHMwAx8vhplnQg9rw4rB1ASWBZG1iHwIPd+9vQZpmmEYFJ7oU\niqVVVf+476phjjb1ImIzROODlZxbC/M+flxNFZSRpSpifhgv8kyncmIwxpLV\nhK7+\r\n=WYbI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly57a9843f2620211119.1","@fluentui/react-theme":"0.0.0-nightly57a9843f2620211119.1","@fluentui/react-utilities":"0.0.0-nightly57a9843f2620211119.1","@fluentui/react-shared-contexts":"0.0.0-nightly57a9843f2620211119.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly57a9843f2620211119.1_1637295583977_0.5158818571203836","host":"s3://npm-registry-packages"}},"0.0.0-nightlyc9ccb6f37d20211122.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyc9ccb6f37d20211122.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyc9ccb6f37d20211122.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"f586a684bdc0909c23d953d80656de244932a978","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyc9ccb6f37d20211122.1.tgz","fileCount":43,"integrity":"sha512-RCR9WLvBgwc2G3xvFXIZnBiUYA6Nn01mqZdsKL/C8+D/OryHqLLiE1UA2EYIXoaABFetVgjzFdmWpStsel6ZTA==","signatures":[{"sig":"MEQCIHXAKMUilVbF04nIoyi68qD4cdCmFlz8PQCdH6R+p3CQAiA0SVItw3qgkhULNW7D6T1Z6v6NimG02Ov1GDr8suicYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmxmBCRA9TVsSAnZWagAAnJAP/RETKD7gqHmP6tD1ipyL\nGNlox6ksOnHWjzH/f5ASpJ/EIX/AGlTLZEhVxbQ0KGq3KTsSijjWuOjT77ld\nJeN58mQ/HCb49zJPttEEamKALpR51TLzX0V4WeCIFAUgIK+WoFXeSs9XzfLG\n1mjQjhgaAs4uEZ7h6L+qu/qTqblH2G6UmpYKLgcKN3okLLEJSpGf3kNj0QnA\naASY52BWdgz6l3s5Q5nwGVKthZplQjGzsWFVItyYqNv3iojd9slehHrSnEnF\nXZLrMkolxnVQvxGn07X1XVbPsR3LSQCSwaayoT8JAkJYOrAMaTfQNZN1kNDq\nouc6XivFaMyyVi4l3Yrgz2Whwoxk/z7/L4jTxMWHcb68LRV0Ar/vejIDzSc5\nuUbY0PQ1OkzfeZnrmktyq/foX8YUNWdlN8vMqQMh9AtxEwJeK5fw8XP4rCyd\nUXprDWEZ0ny5mlqZ2t1ZJ8QXcZs3qf7JGI50aPV9jNXxMmzop1priDigOLzz\npVeBT9bb9FzPW91EaFQhs4vyckhnz0V5Oscp31gPbv4Rb25hqc0SvEBqBLxb\nssx7+smmBvarxZGMqRmOQ9ZTSltdUpew7QjVGA++t47tKE5YDK9YzgiReS3D\neiElafyEdMupU1OijXHIHe7bpxidbn62+CzmXXNFMsj/SKbDwUsYDPZOfK8/\numvC\r\n=4/bY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyc9ccb6f37d20211122.1","@fluentui/react-theme":"0.0.0-nightlyc9ccb6f37d20211122.1","@fluentui/react-utilities":"0.0.0-nightlyc9ccb6f37d20211122.1","@fluentui/react-shared-contexts":"0.0.0-nightlyc9ccb6f37d20211122.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyc9ccb6f37d20211122.1_1637554561051_0.3000114984984166","host":"s3://npm-registry-packages"}},"0.0.0-nightlyc0273fdc6920211123.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyc0273fdc6920211123.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyc0273fdc6920211123.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"f5cabc9f4fe6348ba2225a316e225c39d97d0e35","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyc0273fdc6920211123.1.tgz","fileCount":43,"integrity":"sha512-byvr0+iwFMJSGC9mflW+AXYxj+eGWjpQFWdVjg/wiT9tcLdT5W4C1Z7xBUrpDGE3LTHu4C/8iHyLM0SQ16jvPg==","signatures":[{"sig":"MEQCIHhZmKS0od0HIg6XhqY4H+yC0xLfROpyGYXP+jB+iOdtAiApTf+5GKxgI9RaMVK1H3bpFtg+oXyfxyrq4hhYW1F/tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnGwICRA9TVsSAnZWagAA1R4P/14VL7o3p4wWuDeiVBMB\n4qovOQUe/e1ZjlZZstmkIIHl6gFDOFvta6kaBtyJFKUbF/nP+xkmuW/ajSL/\n7Kr69jMYhJfO6OjCiqFIDNzE3R1MtXMfMPcQV4T3V8V+F4MqoswKKYgXLb7p\nn6iD+XLjghBgy98kc9EcP+0/s/sFbOdzu2eN4jzpDq0c3w2ZHgmh3J4/JgZY\naLes+ytwnynEcwTYS5dK8pYtbFwvFZM5KBsk+goxCqIOkAqs0puQ3zmYMDyU\nMfILriclY2KsHfBZLUS+n3W6CzG5qd1L6AAjLTCR70W5k39XDdOVSuM7Qf+Z\nRGwgAkZTYB506KRuaV79i687cgj7MsEbJko0cGqMaW2a4oqnY8yobOgpEpq0\n01B8jL6V+HLKDhKsz5WfqD4xZLZFBlEpPBIuC0l4D6Cy25djpS+/tiLcZUXs\nn6/jJZ5rjlaGySfykrb4+GI21ATRP+uCMhG5anZVunCnJFj6Vfb27QyLneUp\nc+H8rjYI5uiy8lPNj0HGqvNUhTD8EexJz3MZ9zEvR+zKRHBwUpJMXkJSj3ig\n4a4vEFkJ2NncjCPKyVkCVMsLa07swLuF7MCutKiZKvJPmCBTBl2RtE1QbOHl\nPExQy4qBn6Svt5zycZ6iCAiR7oSAN2Z3h3X2DkVzNiKy477ICTeV5sPhl1ow\nFpGA\r\n=afhd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyc0273fdc6920211123.1","@fluentui/react-theme":"0.0.0-nightlyc0273fdc6920211123.1","@fluentui/react-utilities":"0.0.0-nightlyc0273fdc6920211123.1","@fluentui/react-shared-contexts":"0.0.0-nightlyc0273fdc6920211123.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyc0273fdc6920211123.1_1637641224360_0.733056422787487","host":"s3://npm-registry-packages"}},"0.0.0-nightlya54302c0b220211124.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlya54302c0b220211124.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlya54302c0b220211124.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"dc95d58c2e95442477c6d354a0c990ee79111b2f","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlya54302c0b220211124.1.tgz","fileCount":43,"integrity":"sha512-0hnVA84IKokPfJUuk5W1S/00EnA+NZKn57Fs6snhxTmZJSI6b3ZRX5P+Hb98U0hvc/6swArKm1jHEdh4HT0SVQ==","signatures":[{"sig":"MEYCIQC2fbQKp0EXaBmg0AaJZ/xf57prQLcEWtCz9A/ng1SqWAIhANbsdEFe0RxQH3QvLCxV5UK4yZd653qna1J0wTBlHBID","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":158551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnbvgCRA9TVsSAnZWagAAzjAP/1bJN1nfkdT0H1+dW32g\nNO7KMpVmKZCIgv5E9ePk8o12j0j2pq0cl6eMwgvMUKOzvGIAeJGW+71pq/BH\nALwS/vJ/jdzpXyKrUKzYTEdku09BFB873AhrALKkBg7lT6LzGqyOVa/2QEBe\n2TNIsols+/1UbfOVn4XaYcsn7lWtEfEum/pTpUjZh0JnG6DdYu4iQWkErXnp\nxmYPbbLeZY1HlzSMpMbsuGdjRC77hZI4+Q+ThoW9UXs7+DourfGBOIlAqe9q\n84XuoC9KTb9m4byIOpi1KNgS7UseSt3SW8We+t1HjNM7pjOcuamQl5Qae9YR\nXv9+VIujmjjVVUkIUP9BtQJc5s0gnCHezPC9CfkquWERY64j2QPIU+KTabkQ\nvwLSBZbnm84KikyGP7Vk/IyELxCE1vXehe7aeLCpYVZYMU+ZoP6+31P+cj3c\nDh1NVz97/W3A+PiNSsE+reuBxWuyXk4P7+gjtMYDbj+piHB4pDCKvAQvey6y\n3BS9qxlsAW0dnsgqO7awVrh+zweP3L4j0ziCJsGaZNwwiT2ZdUFKVWXg1V4k\nSrxxwibiIhZcYZuZK4MDyH2jyCUHrT+IH4vPOGJb47pMUmcJd7/SHVHJBgWV\nN8kFaqa2z2oDW2psLC5H0F68XHfAyUZNUQ6DgobF5mupHMSzOoGf/072NRIG\nYyhu\r\n=IKTH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","build:local":"tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlya54302c0b220211124.1","@fluentui/react-theme":"0.0.0-nightlya54302c0b220211124.1","@fluentui/react-utilities":"0.0.0-nightlya54302c0b220211124.0","@fluentui/react-shared-contexts":"0.0.0-nightlya54302c0b220211124.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlya54302c0b220211124.1_1637727200246_0.7550882471752636","host":"s3://npm-registry-packages"}},"0.0.0-nightly99adff5a9a20211125.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly99adff5a9a20211125.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly99adff5a9a20211125.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"dcbac2d9c4980b8480330a674a449562a28ce90f","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly99adff5a9a20211125.1.tgz","fileCount":43,"integrity":"sha512-qrXi6CrE7NhPfWpeHDgFhv1811B4qWOXaUk2DiaRz3y83cIcbS+8zpzKPo2CSMxpxwX+uSKG3k7wOk5+jK1uSw==","signatures":[{"sig":"MEUCIQDcj80b+WyqS/pXBV7OxkztlVQB5vTgAOTdPC7QDOG+FgIgL+8qlgNADPTFokV0NdDIkaTNnstAFWtJ4MP0McfNlq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnw2vCRA9TVsSAnZWagAA5b0QAIR9DA/Z2znkf0yQj2Tl\nUq4EuszbWHvNaR35z29bhyraSwUXdNEkhHomGvqKEqU6OgXRPzE8UZrPxS3K\nufMKecbd1zRTEQ/cbCZrLOEyTK4FXr/Aj5RA46x9+uWy9MkjJody3t5eamMf\nYj3+i/GjCBPpv5s9cU9STKM5JKym8pa9Oi0ROK6JfcYFSmj9FnoE0ABcnlrR\nVvKImQf/pJbnR68rxN3BxJX8KVaA7yejJJLXunTdTjzhPcIgZCljuFJWJnQt\nzvuzyBPbgGDAvZi30ooF+kXP0j+rWJpc+PAU6YbfO/X+CjyWTjdj7RnjBdvJ\nY+1i44GUSU5IH1aBqWzgVdra0WmzU6pY4O7NNoF1gPTscMlAOC9W+pPc4Hy3\nuOYlp1GHLpJcJ52FBG8Ro0tc6qOY5znKJ6sK+9gfMbn+P3Xv4m3MFij3r4Vd\nVb1MwZ9HJl+C2xDU68lswecbgU/PIfhWWxZszBHts2U/Ox/Hw6arG2T8eyo4\n4z8Q6t4AYw5207njM4OWCRvMd188YtyuvfTG4lZjvqm2jx8KNp+jVfOaiaVW\n5mL3D8TkBwJ4MmYiA63bWs+AaidJpe8RWf4xc35Pf8lVsjv+dXwwepTKzN/h\nOM0TftcewyYnTCdXJk4puOJjm0NNk1uk3xNGVH8LEd84X1rp9RnMErDsF0w3\ng751\r\n=WfKX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly99adff5a9a20211125.1","@fluentui/react-theme":"0.0.0-nightly99adff5a9a20211125.1","@fluentui/react-utilities":"0.0.0-nightly99adff5a9a20211125.1","@fluentui/react-shared-contexts":"0.0.0-nightly99adff5a9a20211125.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly99adff5a9a20211125.1_1637813679167_0.7003651027580158","host":"s3://npm-registry-packages"}},"9.0.0-beta.4":{"name":"@fluentui/react-make-styles","version":"9.0.0-beta.4","license":"MIT","_id":"@fluentui/react-make-styles@9.0.0-beta.4","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"9e4c086a8768b3199e9434482add3b7465ace62e","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-9.0.0-beta.4.tgz","fileCount":43,"integrity":"sha512-z6yy4xKc8+4YgmsCqluTHNwVyCoG5EuQauIOaeT8kQVvV+vtxTSTqqj9nzG9uknGu29zlwqSzqfI4U5WKEFHyA==","signatures":[{"sig":"MEYCIQCVf0vf/8Dudf8SzMNe9Vk9pKVk4G+JzDJsu7hP4a7QagIhAM/egBRZzO9iwdRlUzUXQ7r92byTum2CCQSgsjhFhtIQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":158833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn0oKCRA9TVsSAnZWagAAClEP/RwIDiQlsctmwcTpwkYc\nb0lPI/9W8m8MU06xz3FiqIbVub66k3802T+B3ikponM+SroUxm9PTI8Bs09u\nHW22y8wbCCPyv0uxYLid7pwLrcarrURwmL2jb00Pp/mpawOAhZ4jwQ+n4yz6\nziBoHYpLkB5UFHf00HLEBU2JkMDpDiUgeK24Kd7ihXdvF+uPGISYhk3++kxC\nPz9f3/giQKLd/wETqhnaoO8XKtuFSQe1LDKubBnuMzQjyhFjL1Rel/O6Ylze\nhHulndSa/oRJ3yTeWUoHWn+oGYm+ARHnkDAqx7hticy76aCYsnHkFIsdMQXs\nCF/yfuYmJEkUBd6APq9BTQAsBI0BqOs/ihYFVeb3T19XfjApfzf+bL2n3/h7\nYSSfnZRbv/EjSqX/MN4BTb3J4g8lYYgNhW2VFJtyzduuwd96RwQV+lJqJN5d\nWkvVcyJ5Q4pb5vc10mGLGk9/qe63Ne6eI5pM6u16NPfK6q0r52DamCRA5CPA\nke07kGoPtpxHthVw6z3ZiZ6dWoYhWMW2wZiR1N91m7HvK6LxPY73lgGr3dbt\nA0J8eYCjVzpm0RlBvr4wiaTn99KA1e691JCKiy/yycSvOFcNlbCoQ2Q0AMBs\nyEGhjwglXPOf9QInyhfjq9WXRl9R8aOmXLJ1ydG4HcDmzTngdErWR2slc0ER\nJdYB\r\n=SFWD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"9.0.0-beta.3","@fluentui/react-theme":"9.0.0-beta.4","@fluentui/react-utilities":"9.0.0-beta.4","@fluentui/react-shared-contexts":"9.0.0-beta.4"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_9.0.0-beta.4_1637829130219_0.6407556358033832","host":"s3://npm-registry-packages"}},"0.0.0-nightlybd3e92b51920211126.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlybd3e92b51920211126.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlybd3e92b51920211126.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"cb152d2436c55ad1966222a7b4328d4276ec3f7c","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlybd3e92b51920211126.1.tgz","fileCount":43,"integrity":"sha512-Imf3XUnD/73yrjkcwKGQpZc8EuzA8IvRK98ranDRS9VRxEseP2P8e8LGJLIqbqEMBhvfDLszlNDgZIML38cU/g==","signatures":[{"sig":"MEUCIQDH+LtSF4EsvgaTDqUG7bv8SzpCAMO5KaFBdnXokukb3AIgXyPr7EFGOh0IFcFP25ydbIYFGx1YgPYYdzOf3kuww3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhoF+DCRA9TVsSAnZWagAAFowP/3TERvo/YN08hM2EkkCS\nzPt7hJYi1+HQVhb0XzRYaABm4blx2+4GjTj38TYRQGhuqb1rqHwKBSvrlHzd\nqx6kqhFudvOGzr9uCus4KkgfGthtv3LsIdOLihRd8KBfUq8HrUEx66Q1yWVD\nLBnwBziSqU1jfQbwnF5/G9d56fQ1de5GW8JijAfYsfqb/ZJMWOUVMbJWdOra\n431ll19amdq83L4im4J0fTxZ56j5m8wrHpHyeWNoMUBkj9i0eK8Kmk0vFj9I\nMIdvsXYmdxb8kzZdrhYrygrVTLRQ+k8J696sqNGUfwG+Tdj1T3pfaPLPsxaH\nR1T5xjaGHQut+FZxJNIjZADamUQLiKY9HnoPhi/c0STbhAE7uVef+ChOl5sr\nsguF6OifRkXTteCZmjxOyrGFUtO6i4xNiY3EXv6eZ1/zF4KzvbXqDqTa1o9w\n98+feWunFUd4Q2VCcvr+DijCVf4l1CaAHj3rp3u13pq3yz/E+tc7RB3Mp7ie\nVjFdXXbJ9eu9xasLkUi4gQ2uLfO3bch3V0PYmH6duoIqVvJgE5rkL2NO4DeE\nTlhgITwIRfqOfDs31MSklTbWykI3G0LNH98e+x0nxOT81NRVCQDhnXKHEuLO\n/DWmBPztdjRGKW+xtCkIZeS0SMP9lU3fKZEu7iZCm9HwuyScPavXRhXhJFr2\n2bnq\r\n=ggNZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlybd3e92b51920211126.1","@fluentui/react-theme":"0.0.0-nightlybd3e92b51920211126.0","@fluentui/react-utilities":"0.0.0-nightlybd3e92b51920211126.0","@fluentui/react-shared-contexts":"0.0.0-nightlybd3e92b51920211126.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlybd3e92b51920211126.1_1637900163704_0.8046612809217375","host":"s3://npm-registry-packages"}},"0.0.0-nightlyb8537fb52c20211129.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyb8537fb52c20211129.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyb8537fb52c20211129.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"418dd5f239f5bf57eb856a504f3453e9c3025f84","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyb8537fb52c20211129.1.tgz","fileCount":43,"integrity":"sha512-7RWUv+FZzmB2kBHBZR3uwaxk6EFR+8rD06NWg0M0G+9XOX+Znnn9uL4ddYmQtL+a43gYhBrNKMp+LIE/YlWutA==","signatures":[{"sig":"MEUCID78LZ7/0jTE62mhVyMEghIy/TxbniYtH2ce8SRxKvA2AiEAmZwTM41MiBp1wGi1hA3dJF+JBHiDp9NcODZ8vc7l/F0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpFOaCRA9TVsSAnZWagAALW8P/ih6fBKw6N90Z66jm34u\nXTvEZCD0vr5ARUw9rFWwDZZozrSjXVSYZjrJFGDg2DxnzbBbDHKirlz/l7yJ\njzS2ZuNAW6MuqnnZlffedeYIBWtQjdAG6eUsyp27kKgfS3PkoQhHZlp/qRER\nd4Oeor6hHg6b8by9N27TBPv9ToGFP0xhDnEfEKyjl6f3g2weqkHG6M6Rrrc2\nk+7F7R1OaIlgrx09Wq5TQcZa5E6dpwi+19nrxwe8XtjGICrtqzSBUyLjKDwV\ngCi8y+9z5dXN26ajuj97Q8RJDX6tEPJSx4G9awZDlMLGewJt+BOtKW0GXP+g\nzLq/qcf3r3qxYOAOrnK6+IVHJYzCpLCuQ0VOn6kkpLPfNmmr1uyL3UdxKSVk\nNaXIGwbaQeL+6i9NEVaX082z/eZ4jD6q/1ZIy9PmzqIru5C9ybY/eLfzr700\niwozeQnRT9mK5lUbcuyvuLqC3oloZjMmqVAPj9ZRv0kb1DbaFIunhOA6QTX6\nV82ozJDakGMONpWZTbhxrklMMqH4Wv3aQ4Krpm5uihIXCKyEa2o6uq05OvGS\nHtlDeCOUAF4u4veeEuybB6z1bmPP+4Y86esgjpyLTzbi7JgRBXPyWGrEscwb\nof6WVvcsTWxirDs4kE5ZJlOPWREzbD5h8nOQFGzKiFav+oUKN5ji5ViRpikt\nKiUs\r\n=YKnB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyb8537fb52c20211129.1","@fluentui/react-theme":"0.0.0-nightlyb8537fb52c20211129.1","@fluentui/react-utilities":"0.0.0-nightlyb8537fb52c20211129.0","@fluentui/react-shared-contexts":"0.0.0-nightlyb8537fb52c20211129.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyb8537fb52c20211129.1_1638159258817_0.9331376465779373","host":"s3://npm-registry-packages"}},"0.0.0-nightlyb2deb9be1720211130.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyb2deb9be1720211130.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyb2deb9be1720211130.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"71adbcc215d44afcd1122375fd8356960dc70596","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyb2deb9be1720211130.1.tgz","fileCount":43,"integrity":"sha512-hHrj4Q0TWo63OuPZIjerORNzzogaVTsVY3Opyl3d7tX/9pTBRtRlVmnKY18RxrMkDp7YJRBmPIb52h42Jp1RTA==","signatures":[{"sig":"MEYCIQCqGKoB0Dlrfwc0/Re/7LKu6oUjEkoTE2LhdghhxNiJQQIhAJnwz03d0K34YlP7oWgt8EFDveiovJSaUWtPlVH1BxYw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpaUgCRA9TVsSAnZWagAAPakP/0phIBVNJ3yp/2zdCINx\ndWZw7C8T40YVGXbE5fJFOZvEYkujG9WnrBTuYkD67OFYR8OItgGzoJ4BWZfb\nfe1vIxnnmY+CXraMPgfHCzDAbD/gQw9pYQ6vxNRYNnbCS2fSMn89YGJnV+SW\nbQcdBhKM3nL5dzkaWjzqnsk3wKyhn4ST/TrYOAnei4kRiPIKy5ahsXLQgiWP\n8XSzD1cswHNspV696jsofi5TA1VOzMXXEcZ68KW1JqamF26FHx7cjbwbSBxZ\nUQ8aEfhWxXc0Nig6UrlH+dPyac0wNoYBvUQzrnZGb9bYOFQkQ7tc1JWD8pAc\nr6WcRnRKtL7jNUP52Fhw2M5g0b57BRrdAtYs/zUbjhwRxIfkpa4mbXbqsYpK\nTA86jR23xdPgDjs39QSXNl4pMcGF45zT6vPeknbKsBiaGqU+BxOiuX4EE7hz\nwoDnVegm26Ex6kXDzIGXCcx99enUx8bRhvYBI224ZU8APs75WErMN6i97PoJ\nlK+nu+uiYF1NVytYtclYy5IpSk0YR1Vzq8IvnXD/axeuz5l7cRvbZgp2GUwd\n6yVOFM9/O2K9Nzqt604RjLb9/25as8fUXNIQaY34hCPwwcMrk3cYojnQVvNW\n0ZubCg6hHqMOEsFFCWcJ0tkaBBk+4xvrX25azulLX7eHl/WWxJpQsnE+h7Zm\nT+hl\r\n=6iG3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyb2deb9be1720211130.1","@fluentui/react-theme":"0.0.0-nightlyb2deb9be1720211130.1","@fluentui/react-utilities":"0.0.0-nightlyb2deb9be1720211130.0","@fluentui/react-shared-contexts":"0.0.0-nightlyb2deb9be1720211130.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyb2deb9be1720211130.1_1638245664330_0.7772434853634698","host":"s3://npm-registry-packages"}},"0.0.0-nightlyd3bf09bf8120211201.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyd3bf09bf8120211201.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyd3bf09bf8120211201.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"f1f0cd7932e646604dd2d1325c3546a5f99d8100","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyd3bf09bf8120211201.1.tgz","fileCount":43,"integrity":"sha512-R2xqHEcyWxTvBs5QeQ8meTzgBMi1c8e/SI3jLmsmf4nTZh1u3xLDlT+2tkao+LLuzLRf38VG9uHoQuhpiBFGHw==","signatures":[{"sig":"MEQCIDFX8kJP0SW1p22HKJbBo5Cmm6qzB5fOPrevdK3uFFfxAiBc+H9Ag/1OkW7p1+JKV63cwgm8sWEJZjZ6JCoYjXFhbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpvmACRA9TVsSAnZWagAAnHMP/0Vk0v+iol1TCZNBbcGx\nMiCZBfiaTi8P8by5a6f7EI/u3XOwSnrnPJ03cHwHoDdqo3Vf0JxWj3Pm49Zq\nKV9YAgARBqU5yf4NruYEZFfID9sWTAsqG4fYLjyWS64sKfkDCOnh9YYlszwg\nQUDfS07oSavt5+4VgX2Zft5Zpas7SguuGbMIouYlAVrH9YEEWNI8PFXefLu7\n656kGRD3tpibDrWa5rcPmD6LQXVJiWsMMCmYXq1hv39g3IxdKCPNF+S46ggk\ngG4fbyZIxCu3GcgAwyzWq7lMhUOHwLiLJP3qqmWvo1cUWs/teZSHCvyMQYS6\na4Cuv5vMXIEmDqeG9yRP5+grGiGJf5IcqRuzmWTYAwslr6AaIhBUPF11SsDw\n6CGSCOkza8lkZwBXYPgYPzn3CleN5NomurT2wE2F/gmWDyim8wO1CySPyCV6\nYzB+NXymwA2mllmsXiJq42U3f9ozjSRspEM/HwMRNPInQt8ldUMK/JJt7Lsk\nC3weH7mezKIzxPjrCCd8rQg9NT/xtqchjyui39ze+xKawfuX32hqe/Kigsp7\ncNY5lQCoKWmGf0/R6q8ro+bHVVO+/uFUcdQKz78PxEZA6Q6gB2+KEq7kElYN\ncFetC8ZFMHsLau9cg3AAD7EmFYrP95N83zaGpHdqrEhNSk7UeU25dLVx+S/0\n2QWG\r\n=eJPM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyd3bf09bf8120211201.1","@fluentui/react-theme":"0.0.0-nightlyd3bf09bf8120211201.1","@fluentui/react-utilities":"0.0.0-nightlyd3bf09bf8120211201.1","@fluentui/react-shared-contexts":"0.0.0-nightlyd3bf09bf8120211201.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyd3bf09bf8120211201.1_1638332799922_0.493082378339182","host":"s3://npm-registry-packages"}},"0.0.0-nightly554221a5aa20211202.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly554221a5aa20211202.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly554221a5aa20211202.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"597eb9eddc9cba3b2274ba56eced6648d6c6d804","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly554221a5aa20211202.1.tgz","fileCount":43,"integrity":"sha512-aJ/+wiXozNGgaAEfGYALktpigo4j9AdYsYsHZ2zgm02J0/HnrRbzz0xDhqY1OX6yRnDwXKl++i0NHQE/j2zXCA==","signatures":[{"sig":"MEUCIEO1GE2ZgrcUkf0NICk2lSKOwsNSTTn6P5UD7YBRBEzvAiEAv8bvT/8M5hn/tUkQ1wpvVKOp7+sNd46yb/NT+tDb6oA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqEjMCRA9TVsSAnZWagAAy/oP/iitc4mwc+0z9gaX2tbw\nidcTijSNNO85bgEqkyccahG3ALCsjKcdUEcIVmMooXKlkZLTzr1PgxhvG/lj\n90rU1zpBvKAv2qEIKpvBMiXEt1bW3zcGKK/S0WzXLJ/zXOPcsyvD44VgCIZw\nIoLHslRZ53N9Rev4hXC0lFLT96vXMGTdDniKOeYLe2TKaHQ2OKdENfJFjznk\nxDEwww/GpzKU0x1fdGKAD7z5JgHb/0NdyGpy2ZoEGRrbXFMm6sXFB6WxpuuV\n022FX1cmqur8R3gutZiBC21q0r7qlGjt/1p7FdE8WjQ9NbqBlPGVsQOHeGJY\nXKPYO4d0Z9/K9VbaA0G82gbRZwfu7P373Pe4fHij11KkmNzzIzKhh66yci4X\nwt11J5ne+1TO8+pmmX3TlwNg3BD2ZVFdXitQ88dCXQYbRqYPpOHSTgXg5kbJ\n/p9OJriwFm6h0uGB1PG0t8OcKMXUFVnDziT70wvR7zTJKwMi8GBD5jkfNbEI\nNkA8n+Qe5+ueampyrzN8/e5bFg4eXaGtaW3yjafKVvXZ1UxEcgCkEvrEgSe6\n+/oOTBegpIIODQAIDkOS0NygDsonjm+8KsCw+d7j116sKjRVfHgkAscqc8GX\n8hVUsGjQ4OXfNWU+jcCXLmupY3hBqCTRQqzI9scKWFxRxhmUjQrHwLpmhuuf\novrC\r\n=/mqm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly554221a5aa20211202.1","@fluentui/react-theme":"0.0.0-nightly554221a5aa20211202.1","@fluentui/react-utilities":"0.0.0-nightly554221a5aa20211202.1","@fluentui/react-shared-contexts":"0.0.0-nightly554221a5aa20211202.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly554221a5aa20211202.1_1638418636059_0.35136275809039996","host":"s3://npm-registry-packages"}},"0.0.0-nightly131c59c96120211203.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly131c59c96120211203.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly131c59c96120211203.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"2068b5a38e40cca3a4c7ab2a81811b59dc5b464b","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly131c59c96120211203.1.tgz","fileCount":43,"integrity":"sha512-+N6LwTTNTI9Rb8MqzOXj7hZZeWTjSeIy8r98atm46WvuxqFbaYx9M+2ikASvXF7r8AF12N1396eGabX8pUy+gw==","signatures":[{"sig":"MEYCIQC5YVvDrzEepnMBl/raINHA45YMlxVT4pq8YmRiIfKr6QIhAOzIo2MfjsfJCcxfTg5FlJv0FRa9boWGe5eJxA/BU2cx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqZmcCRA9TVsSAnZWagAAmWwQAI3MzjHWUTOewKdSBFDx\neW+A5NkUdtH2+WgLVhVGpA1+eE1BpZq5jGMF1A+Et4G3+kXtkAL7Vlwd6LoN\nBvshmSYW3eIjOw7QtplMgjh7MBl8GwLFlE93hCgGtp+z8PLPdwpzWVYdmhvE\nQicDGhxk/NuFbNj8tUBZJpI4G864iRPjhOOp8/1cWJgNtD94uaatt1zOmGl3\ngYSN5zbVDmlf7J3vSgMkeydOpI4MT6+5QHX85GkiwUYgh1YGpZbUcI4dcUqD\ndGiTpGFljTNv+ym422snRMqtGdYlEnfuHs8t1jIZubS5MkRok4yQ/GDuvsr5\nS62qWL68mG1odxn9jbnWLyofGTPfY4hYPIIrom5ItqUEs3QiPaDUCcislywq\n6F9sTokTRPfnNUWkEc8vzkG64NQPV3mdynEw495KoHM0E2mmAwb7+Et8XGvm\nzBg6OdI8NFjMKFCxMJG1SNe3Y03GUcUvqo40jhRyFcWMIIjSplec1Qh1FK9y\nbZvS+BPxeeVMmlVnV4Ugz+LVWElFN8DjF2USq1IbTZFLx1iB8u/QYNpa74TX\nH0T63NQ576W0oLaldCjcNuSdwYVK/aXe0nc85Eb6Ax4Ctyd3daDeOwCDPu98\nFBRQHhLk4HiP24TMdJ1wBwyiXbQzeWbc+n/YQOCKfFJPqNnc/Z0QkJ4II2sK\nv7W0\r\n=++HT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly131c59c96120211203.1","@fluentui/react-theme":"0.0.0-nightly131c59c96120211203.1","@fluentui/react-utilities":"0.0.0-nightly131c59c96120211203.1","@fluentui/react-shared-contexts":"0.0.0-nightly131c59c96120211203.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly131c59c96120211203.1_1638504859948_0.6351675464508666","host":"s3://npm-registry-packages"}},"0.0.0-nightly39ce3cbcf120211206.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly39ce3cbcf120211206.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly39ce3cbcf120211206.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b25fd8c4393356da7d713844db2deb754fba5896","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly39ce3cbcf120211206.1.tgz","fileCount":43,"integrity":"sha512-cLrEX+kBh7aZefijST7SdRoyFSrvACpVe7JiS4utiCRAWb7FzBhWGnCqN1cOW5u5CZr+o9rNnEE/NQaX+Hgjtw==","signatures":[{"sig":"MEQCIFgsfg24Oyhr9RIqtJ9xBDn4OK5/31fPPrYIX7uzRNuyAiB6z6XfbrRcik6C2GhItYogIHiyXRVBvLY0gzsIgOvkwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrY79CRA9TVsSAnZWagAAOuoP/2njAI0wyTw4OZR1Yit2\nh/oIBnhJmObBOPme6GtMRTD5eKotYrSl1weGQX3Rn8gqGln79uiXtgLAW86t\nUs4MLGaqsGiaM9lOGZbqsK/POx3ChXNaQYTdiUFpxjGaMbCR77GizTjnzDKI\n997f38/O6Oy0/+Xy7piFja5Km1wJyh8GN9+PuCTqN+zHSdGbuVQljxWH+1JA\n4tTmSDlacSq3H/9KFQlgVw07We3Bh9qvCdDr3+K1tB3rkqObFPVA85oEUn8L\nPiWAIU0pKAO5SAYWIGPorg5eRlsJEO2PSMjDaNB9Mbm/z4btbO9tw5WEQKvc\nImzBDSguaKYXXBNMQ2fXQKOL3OK9mjj2sL9H1PyP9kRaKAdf9Y1erngUUH6j\nE7xpyyCxcMbRTCtD1IRlIhPn0a6Io/HhnvnbQKibPKqbRSorNC98acLMtgxS\n3q7rBhXARAujBpsDXcGvkGYH+DF0XoH2S7za1vdCpPBpUBOkD0MAbythc7wl\nUqUF4P006pshdwvrW1gY1gPeC9HTC8uqHMiPRrR9O6n6BAEbcPLV/n1bWi58\nkHTQ0zMkO/nHWh5kzGsQhbdx7aM2gDK49VFSOodZwdxxvtdKbmRtznuVjLxz\nNZDvPE6Dxc+3+aFhj5jSyq9IfTh/chHEhnCH6j77l/vcfsR3VaGa+TSVOOhw\nexGU\r\n=/YfH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly39ce3cbcf120211206.1","@fluentui/react-theme":"0.0.0-nightly39ce3cbcf120211206.1","@fluentui/react-utilities":"0.0.0-nightly39ce3cbcf120211206.1","@fluentui/react-shared-contexts":"0.0.0-nightly39ce3cbcf120211206.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly39ce3cbcf120211206.1_1638764285755_0.36321924400513317","host":"s3://npm-registry-packages"}},"0.0.0-nightlyebf02572f720211207.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyebf02572f720211207.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyebf02572f720211207.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"929aee459ebef30b0b83d60d1ef43a15002af46e","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyebf02572f720211207.1.tgz","fileCount":43,"integrity":"sha512-PWpdC/2V2t252QgjJ7Ng6Bx18w5EfIbzGtgXQOBiy5ZQll0gdco5pqauWSRg5SMVc++RAs7pNjuio1kUnvl5VQ==","signatures":[{"sig":"MEUCIDfJ0GW7i9PSPJUou1X2uWbKG2E8gvGyYJA/3xWbzg7mAiEA66dgdGQz2qoaDOuB0ovAMBdpaZ/KA1oNxEgd230Wksw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrt/gCRA9TVsSAnZWagAA9+UQAImUzu5CmgLxnbwoe4eh\n/Y0tR6lecf9poVjPzbYSl+28lvYUSNl7Y/sOa1fwrdZp1Dv2x8Jv0Ap8X6k2\nyhuvr12OP6i8RCpBtBBP/+08nzDHhda8jCRM14KfVqwwLAD2J1DCE/pvx8up\noLULYM0peF9uE29zd1DhCmeUgJNYx81F23cS7h5lna4WExz9y8rZOXCIPjAP\njtveDtJGrXCd03A2bXSLk+4+w0oB0tXCF9a1sWwIuxkyUqmPSMtQWx8rb0xC\np1QWQxuJG5adB/bttCSsElr6K94L4IvZWFNABKOeX36zPIbtojefnwAvFpzj\n+PrQUApGpPbpjXLtIUmzPu1OUYyz5unZOUAA9a48jT1KAOXdDrEQOdwhUaH9\nosbPPSBRvCIf86Gvx3bUzC4vobZB6tdIJJcS/2hCbCSzgLdqcjJMfqhNHIrb\nh2kSDQM7e1a1/+FPCgmNVLbhRLABrPKCNkl76lB3n2jPDGDMbowxnNaMq3uk\nCbbyXzKvxrG2Rh+T65QscdqxBN0zuXGWQa+JV5hgFSlO+n4pMioCXRRBzY+A\nRKICW4kt0CV6nI7y9M7QHuEvSh0QtPFGECzAEGtkNWuSXPq6xOeJMTkWcVnk\nB09jBPO61kS3q4jxdQ1yE3RJsx/YwJdJDv24+SDIDuVlOGi7/DaLDgqBxo+t\n0e+b\r\n=sIlC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyebf02572f720211207.1","@fluentui/react-theme":"0.0.0-nightlyebf02572f720211207.1","@fluentui/react-utilities":"0.0.0-nightlyebf02572f720211207.1","@fluentui/react-shared-contexts":"0.0.0-nightlyebf02572f720211207.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyebf02572f720211207.1_1638850528700_0.7879723513658887","host":"s3://npm-registry-packages"}},"0.0.0-nightlya0ab3454ed20211208.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlya0ab3454ed20211208.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlya0ab3454ed20211208.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"ff6235fac6b05da5951fd8dc3d6448eb0caf7c4f","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlya0ab3454ed20211208.1.tgz","fileCount":43,"integrity":"sha512-10s8baVRaQJzEx8o0zXiH+MdARfWT5LigVVwdpZVVqWq/BCpPgj9OLJEofoPagQiTcdMEIzPDgmcRCaVt8wlyg==","signatures":[{"sig":"MEQCIFtFSinkz4V9AaDbWIvZ/qpKQdPteOroOZQJn9XHjogxAiAAug3DCY+Xg018HP7ztF3kLOUfmbARlRPX/kxkuv6NaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsDJRCRA9TVsSAnZWagAAJjYP/jSUPrWr81Nfe97zvHMY\nKPQQm2cPdXwOg7gqgHuTP8KSfyWkwkFwSONXM2qFa/UZmAW21jucMn649wjI\nW1ZZQ0/Hfo7nbiaPB7pbeEGzvodLwGulU0gFQBRgBCAtCqslNkyJTNP2tkW/\n82x+yyyvOayUnyJUgc5+5pgMMrV85F1+EFg6GDUlq+xVNdYsZ+poUrs7+YH3\nD4V01q5gU5aalkOMlNbmjBE6Jiuuph3qHJt/MJ9DjjJrdLBPv026yMUnNwfQ\nunshwzLE9JHFzMCEiMqY8o3oJf9nH85IrSyPP6ut72ANZvJFxwwEO/m8986P\nLc0IYhvRAkUFER23XiwPShc7ZedR5LHysHGGuwLSUvm0uF7CI7mlJshfhdDq\n2vPQHJVP4221ZsVmJdnJpP/js+JqLftMv0IG9VDLj0FrraY9BrRXjCNfOIvv\nf2F6p7Uw6vd1StiAhGp3pLNbxXI2Uy+O3eV1hwJ+Aia/hTd91xzcclo4HTiz\nRY9kFGob9sh8gzgJbcoSfVg65XdDmK0eP2IvZUBUR3vSZDxrF/Z1VvvFMJa/\ny6Z7Kr6wiIfTudmxjekBdWqJKx4XNyMqex3H8X3w/scpdmq0pSKxCcnq+K/B\nnKTpY2uWwI3MWQ946W5vgM4cg8t+EGYY39/2Uz4jJmoKlenMNoWdaFHJcFkc\nfW0G\r\n=dkzN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlya0ab3454ed20211208.1","@fluentui/react-theme":"0.0.0-nightlya0ab3454ed20211208.1","@fluentui/react-utilities":"0.0.0-nightlya0ab3454ed20211208.1","@fluentui/react-shared-contexts":"0.0.0-nightlya0ab3454ed20211208.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlya0ab3454ed20211208.1_1638937169511_0.3970903748347059","host":"s3://npm-registry-packages"}},"0.0.0-nightly442708a36520211209.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly442708a36520211209.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly442708a36520211209.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3680a539e05a29d262d95be6a8b2ccc16446fbf5","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly442708a36520211209.1.tgz","fileCount":43,"integrity":"sha512-LBeZFOZU8ViiEvRpunAECo6iQz3rjvQa9WurX2wbGN7Ym3Wnno0kIbDw3H2nTp6qyy8oPHs0sqDYoDcaegqFFQ==","signatures":[{"sig":"MEUCIEX8FdHzFgzOZajds/hIQLMgBXmJGhTyoJ4veXIY1qB0AiEApprS/YDDfg3lWKufKF0sZH+IjuLp6/kuHXx9Be5ytig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsYMICRA9TVsSAnZWagAA4eoQAJAjfBxW1RUHGwqvC5Er\n5ThbSc1lwVJMX+zKAVRhP0CMuqQ9zXEuZOA4WCIY1oKT/+845YwczuG9PTZA\n/3LQtZ8kxBFHl0fCGOmnkYMhhdwYpCQO1ZfyKcUbDhkVx7TeRJXK+256pYgK\nTWTPMj8Q4HrP0e9omrXtFfRjCtkx8QjhtrHqRSZFH9k2ijWX02EGZpyQeBbZ\nopgGgrCNRoA1xutJECo2lO416tllnfNIVoa/G1ETac5VProQJdLKALFZq1Wr\nh2L97vh+Y1B0IQDHFiZuljHyR9IAKR3dUUlfkhLQNNi3eDmMPGOvsKJhTL0s\nvN/4YkUvndZ/iAwi1Lb7gBWrONJcW2lFcI9OGkusbou+yxqXW9P1JDFZ1bi3\nr3aErC0CpbweRJ45XMhXwCoRZPaR6WH7SY4Xj+dqfW1vRd4z8fNp53fdaFHY\nrBCLzeOT/D/POsSBKUYMFOVjQyBalm2pgC+jCtxm4th2vIz3LwZ5KEkDAh1S\nlwtfmPai3JtNcNBwFtSBA78fZO4m0OW9RPmN7Mpya5jeokrTbOgfe/EzqI4H\ns33KRPDLGXJ54f7EqtLvD2xjLj2XEbT380yMfemRstCpswKRXLfAa8g3h+EV\nC5rmfbWs+kndVf7NGyUuzK97aoOM6cJ0acExOVsJIpfi/K4QCwPA3H6GtfIh\nzJFw\r\n=ld7Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly442708a36520211209.1","@fluentui/react-theme":"0.0.0-nightly442708a36520211209.1","@fluentui/react-utilities":"0.0.0-nightly442708a36520211209.1","@fluentui/react-shared-contexts":"0.0.0-nightly442708a36520211209.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly442708a36520211209.1_1639023368317_0.18502265478900126","host":"s3://npm-registry-packages"}},"0.0.0-nightly89deee5b2a20211210.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly89deee5b2a20211210.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly89deee5b2a20211210.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b05e067bc40768a8c8345bd7e56043d2a063f022","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly89deee5b2a20211210.1.tgz","fileCount":43,"integrity":"sha512-9G0CrAHi4HNZB0QlcT8aSXAzRc974LUn9sSXfLiwAPFggYijwRVmGUWzjt4XjRsW1XH0f00rua8EugkaG4E9EA==","signatures":[{"sig":"MEUCIEl6F0mDFy+qDWk5yu0tuREtFgIs7WN0Dvj4ZsZSiK0xAiEApn/IrspRrI5NurxdtvqjQ50JA1crT6OOK9J1u43k4Zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhstVQCRA9TVsSAnZWagAA728P/2/0PA51UNZ2CQ7VdPFo\nctCpRKXgiBwPp8L5ugNZ99r5I28ishuk0j+Ps1ifVtHUjpxqDaSLyuqSUiK9\naLqVprG30gNwyFZU4RwhYaQ/x1UWFMkSkdlmNGaM8qezlPZ38pNe2ZpDcg92\nanTSaDfvkvHMW50rlULftfB2CsyofA8YKqb6/HNIMDjX5JezaqyncXHjnYEM\nCAoTIdvaMy1gIrU5jj1FbF7KnbYLccAbIa4Z2SpyTnNK8vuaUUUnE87+4q8T\nfR+wRpTN1vbIUV51ODN1ZzyQBJn5p8W+y8w4ETckP4Y0KWC18gQBsgk/uj2a\nbsXdEluJyV7R7Dxwn5aSK7ivV8HNKt/3DQCA4xESb+4g8hM7zkiuVj36eHHb\nWodYonjQR7TBcZ/8wo5L2BoTR0UKU644Wf9d0PTYOM3+TcjIgKB6Lh4hEZH5\nK/CETICTy1mF99mxZqHUS8pXTyNqZm0uiiJh9JEcOIjfBUscs+89oRuN4y3T\nbIp2D/U67JoDcwMa8VwlhyZZu9IMX19WLGnPVBtEkKVvY0yKkVtpVTKuZzEm\ndTSiWU+bMPfT9wHHggmi4hagtioHWVizMigJ6fgx4vcgpqj+XbBgv9OlhUaq\n0KXoaubG//H/wEPmoU5aC6B/JKzSNjbbDu5LsbbqIa1uFJkDsvBh8hL23SLR\nhvZo\r\n=nDwc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly89deee5b2a20211210.1","@fluentui/react-theme":"0.0.0-nightly89deee5b2a20211210.1","@fluentui/react-utilities":"0.0.0-nightly89deee5b2a20211210.1","@fluentui/react-shared-contexts":"0.0.0-nightly89deee5b2a20211210.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly89deee5b2a20211210.1_1639109968339_0.13162449749806937","host":"s3://npm-registry-packages"}},"0.0.0-nightly65dd5f749420211213.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly65dd5f749420211213.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly65dd5f749420211213.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"144241fb53e55cbca8a6cb814dd68b476dde26b6","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly65dd5f749420211213.1.tgz","fileCount":43,"integrity":"sha512-1x/QQVc4Jfjr79xxaNlSq3jSMg75owMP2Qf7HTyREJ8QoLRyfVC8SPD8Du9vhN257gnFS4Jm/2J6sqj2zM3vxQ==","signatures":[{"sig":"MEUCIDMig5Iw1rGjGtOH1uu7njAD1Jn8A2hRPknToE6bBmB1AiEAnzz5Z8ewydUEeH3FrmVjHU1BXeBFD1Qc/e3azsAanGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtslhCRA9TVsSAnZWagAAwzsP/RnMl4ffY1DPDVwIsh1v\nhPjjoBkkpxd6gloYjxPZibz6c3kWufopx1Y2PHNxmNnEgcWmaFMEVCw9NHnP\nwxYIiPQDSzXpA6ffUV2dCrnFHjbXbdhGK0VgWMNAyJP9ARwQCxitdQfVq+MU\n+q5YVlsj6SyRx7DVkeVnwAu+OLHdL1hy22p0086ur1+wyh5kHKy28HZa5MdM\nAR5quS39isOzlmpE3tG2vAeCGS1wBHaL+vHXTqM9k03jrn+0Yh77vZqcyiza\n+fN82H+uaEWaLrQdhMLAClcLbGMi4x6h/M5H17sDTPqgcDebVkt/DH/lcKAY\nAkPZoWsOGwjZjl+NY954PcmwU2W2e9b58O112kY9jpEwxUalyg7/dMZdihmb\nbrtH1Y531mtcTIGZzsoBI/5ld7nmOTqRhtH8EttfxGORqkahz0xMfGoXo27v\nP70H6ftxbvuZN17wIpwXRn1TRkGs6GsdKgocoFFBqJwNONEns1d//m2Mr0j4\nES5XVZ6LHEBwMDnURQ/OehDGBoB7e0K+0YEAd+MNH8TktpYHR0229IC3uLmS\neOeUhdoopI4dbu9ww9zgTR28PH1iSFrTldLYKY8OvMK+VuiLIpVEjdLN2ohh\nee1bgDuJQebQWtLwXSqrSnmzCHTaZ+H6sCyGYLYXzeKTnQ3JyEMa7/dIjMo4\nBtDN\r\n=687b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly65dd5f749420211213.1","@fluentui/react-theme":"0.0.0-nightly65dd5f749420211213.1","@fluentui/react-utilities":"0.0.0-nightly65dd5f749420211213.1","@fluentui/react-shared-contexts":"0.0.0-nightly65dd5f749420211213.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly65dd5f749420211213.1_1639369057595_0.853588204137915","host":"s3://npm-registry-packages"}},"0.0.0-nightlyf1be0a972820211214.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyf1be0a972820211214.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyf1be0a972820211214.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"15f539296ff6db2b9a9a23a046ca673a9377f61e","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyf1be0a972820211214.1.tgz","fileCount":43,"integrity":"sha512-N8nXooSMU8lWcM4gYXuz7IJDa8nia/EB7HGDrckZE1p8vmgDYjRiAAqeMC+pME2B19b/hMHX8od+tISVml54Gw==","signatures":[{"sig":"MEYCIQDgs0pU4mguxuTqeJhY1OAdWUdqYyLdngRtsdHn3bEhhQIhAOZpf3JlFvmhH3J319wSzRI6rQ5Lr/lg0QQwpr3Zcd7H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuBrQCRA9TVsSAnZWagAAP5wP/1ci6eVTlTHqYDGW+A4y\ntFxeB+7bM5MTwnqiv3BBFbW9zjXAGoL9Ldqrk6cpFoTKxF98hnDpYGDfFPdz\n2VpgJeIhF30aUJPEk5huifpQDupfa7BpzCHq6qdCJYMyX1kx6S0P9IC8tZQU\nswDeEzmmSVXxEpOBcmQe6ozzqdrCQYzEma1NiPqeMGKyckTaYz8dpe/8oT+A\nk2dNNHMxvx0jBIIgHVsG5bsOnEtAEDCik4NPmzRzJvCnlLKvnyek15yNghaM\nI65cNG2GCzPOVIYs/wLlnOUC7c130qzDfB1H7kuZ1Jy8/3RO7ZPXrlAGBJdo\nbzG70ER4QLLGbi4rbPnqy6uixRBRdwZdLeNpd2pgwVdeEaBr+hQrsZ9NT5pO\nWF+wHlb6tSHG/VGgoHDG83BDhd74+qULJw5fmhm1WYygk0FqsInQ+vbkh3hg\n7d8/fobexGnVsaAk6lNieMT9EoA/UOB0kxHiZhg+ZwS1MQ//Jwll/18qKBiR\nc9n5vZtFQrbkxI/L7U5En9RXbubtQ2zqR2ukPx0Mefmn6LRR/zJHn4DUXVmf\n7loQP2Vv8wH/0DE/OPsWSIHS1LSw3MUYl7TQoaag8i7+RXp0q5GYfTYBZH78\n+NDQj3e00d+xvrGyOA/bOyuuMymhA1VN5T6FZJBnKcETQ7SPyaAnsIrA0B7J\nOk0c\r\n=kUX4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyf1be0a972820211214.1","@fluentui/react-theme":"0.0.0-nightlyf1be0a972820211214.1","@fluentui/react-utilities":"0.0.0-nightlyf1be0a972820211214.1","@fluentui/react-shared-contexts":"0.0.0-nightlyf1be0a972820211214.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyf1be0a972820211214.1_1639455440341_0.3864342992027914","host":"s3://npm-registry-packages"}},"0.0.0-nightly28ceaaa83c20211215.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly28ceaaa83c20211215.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly28ceaaa83c20211215.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"a3997e58100e0c01424d7cd8eb496305436b17b8","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly28ceaaa83c20211215.1.tgz","fileCount":43,"integrity":"sha512-r1aUZtiLMZAt5/hYL/4irC6jnKdaaoTf8Ipv3laegH71yWTMw29u8fU1wD2ge4ZkICJ8OR5TbV9diE69clLjCQ==","signatures":[{"sig":"MEQCIBTZ688MK+9eNqsbrqRXmr6Ilt89HjJqVJhUQqKgEEZVAiAWKW4ESqz8gDTnvNrf/FyFyGeBe2cZJN+/HbQEXa4bsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuWw7CRA9TVsSAnZWagAAMJYP/iWV/cQ74rq4zSFXJN89\nnQLwuMmjk231w3jX92KpoQQ0omzxnBFl/cFbwFz+RX/xejTgLqLH3zBYmu8M\nNem6PowdaHEji8S5O9DLT7dfKCbibF+JfTji0khuitNKeBtBI1D2GCkwDa82\ncsJkkoyQvFiekgenBi3ENY64n2uvIPFJ/45xLyGwG7WPz3TDMXYFsEaK80xC\nQUCpFNW5GWx69UXKTvVHExM5VCS0UUVQ5zKbVtLU2WJDE1BTQE2DnX85rKdW\nhIlS+eFQGJggN87eHnfOqOFqvJNO10r+4Hwe7U4zh36aUQ9sp65zbDSRi1xk\nRRdSrCF5+yIOGT23FZv8FFYnYkmtm7p2lREqKRSlGYayiUyCNWjpSvd0UY05\n/C7rmuk9eqot0ABxiaMtYzUG7dMvw9uNScdU7AVslDonH5OuLqaKRcwq2poq\nN/NTh+63XPV4awzzyV3D0SebcsaIaGWGvpJAoC97TVGXOOZNP/Si1KDbvsXo\nsJw6aI4zUsdteRR5Yo8+WZ2Jmavqwab8/bUST9/HWB7+mXd23E2kUuxREo9q\nuZm0zyO9IRmfkANwL9uGXYmn3qwXgZnF9EplFqM45MhRoiMxncQGZQKlpXpu\najyQCw0nNGvsB7MZY47fEMSG3IJ0uvr4hUh9KDXMBDTX92nphYy6kaCmPzXB\nMLq+\r\n=orzn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly28ceaaa83c20211215.1","@fluentui/react-theme":"0.0.0-nightly28ceaaa83c20211215.1","@fluentui/react-utilities":"0.0.0-nightly28ceaaa83c20211215.1","@fluentui/react-shared-contexts":"0.0.0-nightly28ceaaa83c20211215.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly28ceaaa83c20211215.1_1639541819717_0.4340491924508234","host":"s3://npm-registry-packages"}},"0.0.0-nightly58c310891320211216.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly58c310891320211216.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly58c310891320211216.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"76848b77782bb926c61a76b15f8f50cc8de1ccaa","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly58c310891320211216.1.tgz","fileCount":43,"integrity":"sha512-QBsf4RBHvCj6NxMEBBr3aY3H/ejyE5gO3sDXSWZQjHbTLoSruEVncb+B2xMwVurzBXxL/DhRIf1mw/OX2JIueA==","signatures":[{"sig":"MEUCIAxcN//vv1+yFyXO7jf6hH84x7C9ZEKiQEhRCSDCiW3KAiEA1gpULtqhpep5HmSI5KENSG/tu4qvvgO00uz71MvTUQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhur2CCRA9TVsSAnZWagAAIaEP/jmKGSsHI7S+B4te/27q\nxGK9EVBoEdb/XUux/OxxMgym4I+oMGEO2As9RAQNdQ3YyJiznh+oUftEirL2\nPswC/7vOVv9r1ZSdMjOTJGN+Lok85EqPOOIFsB0SjvOfV2IS7E6ES3pCzWP4\nYCSHjgVGY8jBHbN2bE0Bg2sinQBlKVFO3QgQ4Q5XYKd2oihtd0ACdBXNhe2x\nEEODKq3n4j/aDbejzFrlvBYeRcXl3WJwNg+fIw8MsMJEp1BQ4mYC+tWEMrP8\nQQ7jkBcbB+44MUIZSdog3LVWR6sn3mvBc0oyDkRlBAPj/3UG8rV28H1WNfsO\nsR0PnzXGHdA7DUKFkQYgHUq9bhlsxIjWkgEVHPq3wqPoC5FGne4jo9iYqCiZ\nUrDm76oOp6rn1yLnMxd4UtAJMejfig1L5OeT9rg+6s2s4yBylXLlHHcFG2Hz\nKXAfyIEVpzazc1C7SDiSi+f/oTBbtjcwLxheDTGB1OtBpIbcX74pWaX4Phn4\n4iUs45QwZ4TIj7L6pvW+jezmmhIxVHMigxeyEnfgfnmKuSpjn+zGy2bww42B\nSB9GdwspQAxZcPWHOFs38+ju5wudCbzBO5shqlbSeJU8ISePDnsfPCbC3ham\nBZ/hL3VJ22O/1kfC0kIMG/3oJUzB4K3vvkWbMc9DrTE+V0Q7vUBF4TN9Ngg3\nLcgI\r\n=7tgl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly58c310891320211216.1","@fluentui/react-theme":"0.0.0-nightly58c310891320211216.1","@fluentui/react-utilities":"0.0.0-nightly58c310891320211216.1","@fluentui/react-shared-contexts":"0.0.0-nightly58c310891320211216.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly58c310891320211216.1_1639628162271_0.38207990898739475","host":"s3://npm-registry-packages"}},"0.0.0-nightly2462abf75c20211217.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly2462abf75c20211217.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly2462abf75c20211217.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"5174d336a427da0953c70e756f9adfa564a87b03","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly2462abf75c20211217.1.tgz","fileCount":43,"integrity":"sha512-bu41pNaS5B1pbIn4u51hnZZq5b1l4hU93fmzSskbzhRG0AhL0AyEHBwwursbnLWGuK+/YWcZpEaji8rdPgOe9g==","signatures":[{"sig":"MEUCIQC/ysZz2xdUDxJh8pXeAzeY68wh9Lz+fC8mxEAEYPkH4AIgcEeafAmlyNdj/U7QBqezYXQckOZ//kjWuDCQ53uEwsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvA78CRA9TVsSAnZWagAAGVkP/14wxxl9+v2JqSmIrEe3\nyAt1B2i6sI5odcJrU8r3Oy8O+ikMiOkH0ApwxKOWonot6OpoSQEaidruPwkN\ngrenkzBaoXsD0YCkf70lQdS0nTSSlT5nDC2JZl4zKs0veKo2TlgzaMjuXPk+\n788GJmsejHpZF8FFDQCsc/tlTrKQGWgkbp2NYotyDfYiewiwOdRQpvISghCF\nIiBXRYZZusin3e5jC+T8NFBpa0POEG9FIPtyV04ENbFpFH9rK1P0DCBTAMqg\nUUDLb5IAnbmqWQnelO+DvnjO2bY2V7T/b32qpbbcvY59N+QbqqLmMOfW1odZ\njpuDS6L+qnBtnIyMQuizSFLz7GDCkRB/bRd+jtOIQurJo/8NSuY73VPswMfz\n8uO5k3T/oBq96hejDKWXj+xL+G5FWDb1HPc0rHexSmZSkv5ftczhrHdxoA7z\nbFYavkHaEQSJYrMB9GXSsBsr2tpbwfvaGSe1zJhnMa8IVXiL+8taRKC21LeC\nlAZhMcObJDJA9JjanaQMyZeTj1qENFz1ovuZP11kvXtA1of09YtpSyuOeFfZ\nCwRLh2tvoMFFMvUR6UnjZZM6DJ4VsLH+FhdWdJrBs3As/pw9F8WgNASBeSGS\n2Oa9SKq5xIhdQ9WsqLg+T1nYulAznaBea+SlInr2rKYYAYjE3EyxbaKO69jc\nFaES\r\n=AG+j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly2462abf75c20211217.1","@fluentui/react-theme":"0.0.0-nightly2462abf75c20211217.1","@fluentui/react-utilities":"0.0.0-nightly2462abf75c20211217.1","@fluentui/react-shared-contexts":"0.0.0-nightly2462abf75c20211217.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly2462abf75c20211217.1_1639714555890_0.8768203731928739","host":"s3://npm-registry-packages"}},"0.0.0-nightlycc44f3625c20211220.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlycc44f3625c20211220.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlycc44f3625c20211220.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4e28ffd6b87515985f7e37b0efa20d8058924373","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlycc44f3625c20211220.1.tgz","fileCount":43,"integrity":"sha512-TRFNBBfcHeA5XcgzfyuEnKttnBx0UIax+56Aw38k+DY2z+qS6gpFLTwSBzcNZZ5r2yfkgDlYHFWXAsrLxB4Nnw==","signatures":[{"sig":"MEYCIQC5vAVRp6a+KQnGqutY6g+jQUtGtA6De/b40P3D0KDe0QIhAIcJZn+Fz64eyVcv5JMR3eqXk2sffvbnozZUrtU4j+s7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwAQ5CRA9TVsSAnZWagAAVJcQAIHh5s6t0MVw8mhpIhYp\nNrwi4rosTAf7UkWz3cr02yu+/cpjlZQ4tUY0lh+2IOCUiU2I6f2h1dnpi277\nhzUeszm8dfdydpWQjYEsqEgYKjTlu7E3C5WfsDXbsbcetstxj56cQYV2o4ws\nNFDpvzI+liCOYHSeIsBsfha3lDkAMgPWulwtpXkRX4P+n2P0GGPLL2R44Q+u\nLmO64ryBA0lk+gRgkkz9P6YwxYYWBgbpHwqmST3IUpif7bV61vzaM01F2H4f\ng4DxLZbvIPqK7POqjTLSUW3OUMcuFvciwk6/IJ89qdTrcZcU67FvQ3gYrTUu\n7ZE0lT0+G0YfKkuWyyCw8rsdnAN954n/PXvhyJymFPL3u3amjBDtTM2GrZRN\nEmxDXdx9/KL1/dReoB3NYyXcjnm0rez7gn3OdUCADGWdDit4hNJY7ZeN8K3t\nJSrAg2lh/M0J6HHDuX5WAm+m2tMJX9TIU4VUNIaBfME/+ojWUh3t1OPMDyBl\n3LQdaE3wNQUnb+dc5JiJey9DvCvBkE9lpMH8ClrC4ORBQTH0vQyz+JHEPh3l\n5eTB81skeyvr2X36Nw/gjfLDalxXgtyVbJi5KZbaM3iwdJXZttCHj9LmGHWk\nVf1ulgqwbJMCmgxirLfo11cWryhEj6zPGXmLe9+m158wgYjJ0IL7me8n0Oq6\npGks\r\n=qHad\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlycc44f3625c20211220.1","@fluentui/react-theme":"0.0.0-nightlycc44f3625c20211220.1","@fluentui/react-utilities":"0.0.0-nightlycc44f3625c20211220.1","@fluentui/react-shared-contexts":"0.0.0-nightlycc44f3625c20211220.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlycc44f3625c20211220.1_1639973945180_0.6109376159215467","host":"s3://npm-registry-packages"}},"0.0.0-nightly07d9ed6d1b20211221.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly07d9ed6d1b20211221.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly07d9ed6d1b20211221.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"62b239be778857a24f9a47fa10d9fd8be59ab381","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly07d9ed6d1b20211221.1.tgz","fileCount":43,"integrity":"sha512-0i0PZ1nyqfgzw5u9JArrwlV6umwRFoyzyAaFvTRnMrE8druSRczkD6f/W5rz2FskvBZeGsarhIzjYglYblCuag==","signatures":[{"sig":"MEUCIBg2Ub2S7k0SCkcdk07jSJXGtOvhIwywOuWZPL1+JLA0AiEAvOWRW8kM313A4U++LWUtgaSEsRYtzMbh9sGT02qJv1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwVVtCRA9TVsSAnZWagAAkVUP/0T2n5lVONHa7n2D7i3K\nM4/66angUtQliyG137A1yrjhpC+ic5i5ZthLA6aK5v/qAdqZj2D/GqRu8nAS\nsZA1GNjv0PC++1JnE0aAIs7cKXwQVVQI4i+3Xhaq2q1tR3Ft4p7DXXH28P7g\nqUyfxjH1EtlR8LlNUo8S/ulNA4N/ZeN2pSwTFbSl1QoSEtoEqd7HmgdjpApO\n3owwFiIVsUJzzg0SexROqrG7W4E9wZ7kW0hFEnlNeIED/3ay2KA14u2JxEJZ\noays8G6efZrOsoEqOKSNc/zwM4IGlcUFVdwBd8caT5iMTqSaebf1JuRgS5NP\ntmgni4rBvyHdvFnpGzpC0nFRmtcVRKUDQdkmEGWpcBUkYwbeoYhb+h64FmVM\nnCiS5N17AnLg7xj34y+jegz1BunTxNZcj+w7qZCypF9ZbMHxklWf1kl+Ij7O\nVVP9H03XzU0QN24AB0WmXaDAOALjAtHlQD5xaoFJY8gyOxIh+KtPNuVaD5Xw\npezEYQe8DTSKlDwx4AL97dLXvWhqWPgJtjrLYd8P1WI88t/2OsugqduMcdkb\nVI0ZvfaxuwEPpqHQWbX+hGnQmnF94GIVjfY3HK5msKBcInC42gCT6ZNqlf3Z\nR8qX0MBAavPs/MMziexps6LeOnhG58iz2Kc7PdpSxHwas/sfe/EDDsdLvo9I\nMxig\r\n=9GGN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly07d9ed6d1b20211221.1","@fluentui/react-theme":"0.0.0-nightly07d9ed6d1b20211221.1","@fluentui/react-utilities":"0.0.0-nightly07d9ed6d1b20211221.1","@fluentui/react-shared-contexts":"0.0.0-nightly07d9ed6d1b20211221.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly07d9ed6d1b20211221.1_1640060269251_0.566499164140233","host":"s3://npm-registry-packages"}},"0.0.0-nightlycbf184efa720211222.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlycbf184efa720211222.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlycbf184efa720211222.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"87bb967b3e4a225403e40715b3d11650ea4cf6df","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlycbf184efa720211222.1.tgz","fileCount":43,"integrity":"sha512-ElUwhq7nJmnB+SrMj/tkZkWcgxW82KnqMA+Ry9DHX1mtdaPzE4vwD6szuBs+wcF9+AIwXiLUeFWsDQnRnSP/og==","signatures":[{"sig":"MEYCIQDRrgUUvmOJwJ+6S2B0oUteTacJ1Lf5xpVZTq/8sSI7cgIhAPVA8gFtK1PvcJwxJ5aCAL0GsxA8xk7MWxgWYrf3BYmP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwqY1CRA9TVsSAnZWagAA4iwQAJQiHPG6thjE4wEaiEMz\n5Pe3SViF8ehshMEzqs4Zd9wUZpGMFHy7q0tp6na6xe+8QvcA4C2MOuKbbJ/k\nvNkLKHWJauJsoeQZyuD0Yp4IaUQkd/nBWYVNDmM08E/H9zkBKQRCkUl0DsMD\nE1qulInD66F3F2CYEGIXVRu0nzHxW9gJ1V1dJ7j5c/1jZrE0uDiuvI9AlMbI\n+xrboFwNeLJU1xfGjrFwyJQnLdy6UtfX0PJrPlFGsrUPg1xwUFBJeZoI3IQx\nQl1iu4xMXttT0gwPx4sHhK2UHWBXhvwx/J0wm6KMab6g2voHT98szZ7ed3CE\naliGh+fTuGepaS0HHE7galJaxZ4lTUE9+IT99pG2Gh3DBVRvolWsEQ5vDJoI\nDbtdtW26AFhF37b+zZn3jXY8+DeVXRWpD2cEaW2LEC9wypthZvpdOx5RjBe7\nWCAv611vmaWA0ca6D+PnMf5nn30BaLQoDcLOhf1ph4m4Ij7q0W2cYNAlOxWu\nyidDBfRt/kXA3Iw0Xhhx+RRpXo8BODRuVMRWStlvbOfHImN8uSjlT4+dDWe6\nQjhSIfr3CPOEQ04IE18N/Tpu8ROdHvq8i3PpbIOSQf5PrA1WhUXKxcJAXZ0r\nOvR0FtHk/dvsL9f24td+ChNsEacPQFAUQ+AJwTcZ4tM2esQrl9EgGVoZw1Wi\n7KWx\r\n=xf84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlycbf184efa720211222.1","@fluentui/react-theme":"0.0.0-nightlycbf184efa720211222.1","@fluentui/react-utilities":"0.0.0-nightlycbf184efa720211222.1","@fluentui/react-shared-contexts":"0.0.0-nightlycbf184efa720211222.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlycbf184efa720211222.1_1640146485050_0.5443406499088579","host":"s3://npm-registry-packages"}},"0.0.0-nightly9942542e5320220104.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly9942542e5320220104.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly9942542e5320220104.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"cd755adf8f921792967a6b898f986504001d8282","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly9942542e5320220104.1.tgz","fileCount":43,"integrity":"sha512-wsZvCQJFdvOPT9u0vZS4EjVy91bSzwSABoRSNpjOCGWw+AGJHe4dK11NQwr8+6jvRTwn48GJvSFKnzV8XAQYXw==","signatures":[{"sig":"MEQCIEk0O04TRFjaHeaePNJHzRMQBpEg0sNwJptFwQR7DKlrAiA1bqukL9yAfIaz7jHGveGo0eHDe8AqpB8hnUqZT6Fx/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh08tjCRA9TVsSAnZWagAAqfkP/1WmUhKH0Sdpmtxutfn5\nlsNtOx6pb6WIva6bBq+2pgKoxtvd6oEcNf51HQv4NUEt1kzD2auUUC7jdwK2\nZ1PuVCgHof5f+nqZrLG/jbuj4X+Fk5KwUG+Ki1Ozz1PM66mv4gKVF3+2P6Kn\nfYI5VRv7ZpfFNbUZRcd4am8SiTG5oC50K/Q6h+yjjdP7M4FGFJ2wgg1wx8Q1\nCLJP5kBvOGUKEPuROqnm5N3iOy/6sCGOatPqLEODozp6ORQjfqmW/G06Lw0Y\nb50AbMkLi212B7sEXCQ5IGKoVrlo9zn93SM2C0JkCfV5KlIKHWhPJoNrpwog\nMRn6m/SmygEkikyK909FRLheC/XIhRgGd9gn4AYrh5spgWQcpMRmEYeuLzaz\nIqlwUHWN4MAO5l4SchDMZQ3uoZsk6K6rRrx7ZwCmHXP9Bo9pupsWQ08ujXH5\nP0ZxTSez2lJLtFjXChn/e4eNdR6TByBLvpUpipKLVjPaMg8wPKAH+/M+0rvf\nwz3H34ECrqMAxJd/0/S1PmdV1KNmdAG8ADDe1VNPXBLfaKew2fAJYKkyW37w\nR5E9guC2ohLwz56GLkihRI77KvPLUY80PWytJyF0y9urAtfGd3eVInJ7eLEy\ndqmAoR4iX4ZNSmNs+T106P1m/UpN5ltxiox1Iyq/dVCjrQPbOczQHaRs/FPv\nSAGR\r\n=KcxI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly9942542e5320220104.1","@fluentui/react-theme":"0.0.0-nightly9942542e5320220104.1","@fluentui/react-utilities":"0.0.0-nightly9942542e5320220104.1","@fluentui/react-shared-contexts":"0.0.0-nightly9942542e5320220104.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly9942542e5320220104.1_1641270115692_0.5067445720067625","host":"s3://npm-registry-packages"}},"0.0.0-nightlyca6ef2bc8e20220105.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyca6ef2bc8e20220105.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyca6ef2bc8e20220105.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"16528d4f017cf4fc8033c71cd4eb16b237aa3f80","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyca6ef2bc8e20220105.1.tgz","fileCount":43,"integrity":"sha512-NRzbvw/eMw2w6c8mYnsSuuiKk4oRbEfuDt85bhWHyaOl6W6dAnYTG/pwp4AYjDNSv2q/OtUKLGK0cF3RqS2kwQ==","signatures":[{"sig":"MEYCIQCFxl+T0wfemGtj6ckMOfvYjWSoQOswz1doqMnSuepzKwIhAOZLNMlDge14yXCK7iuMk9wYrxfsOXTodiVN4Tcp7GwG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1RxhCRA9TVsSAnZWagAABIwQAI5ZntGHng+yPX7J4mLV\nWOpruuv9g8ijGrJcyBXEvBkJZGTYQ95qgDm0lVWPEyZFS4SMP1gREJulZR/I\negR8Y/xKetW0Sjz0f81wyxubJRZrdR2gbStsyKfrH9lT2yBwYOhAa4jFz4g4\nye0J+8AKO66Z1Q1nl6ON3PQCT1fuNS91G7md6FpAXS6WxFMUE3/zWzmk2x2n\nr644s47G69s8k88Bp+srAhQaBDzBavvTkefoEMbn3OX2B6M+EfHk8RsuZMJg\nr6Jzd9AW2uRBUm9Gu22lmnXl88eTfg+fa5TIU+DU+bMwxwQrswMASwMEVQ5S\nNDDukyS0h+NFcdnGpK3mLGPKjXX3CEeaby4guaAi6ja59qKPWTNPZhCEUvkj\nhe/HmR0Higln1rZovE3Cb//J3kCV/bz7eKDYpBCNJ0xpLN3TGnR6BeNBqNwc\n9wDGn2NDLSBp2NixL7Mw1kFkF2xGBokEfTRQjyLzFWHL+x4Bp6MQ1u7tcSO4\n1BFArmXbhbWNDWmsujqsdqF0pKDFwSPPhvKFQMWpHxJ2kyty/bhPRmZ9s+p9\nFphRWPjnEU/i+neuWzPiSSThOE6lKqxnU+bYgm7y8knANX+QXN1UgphSVD5X\nwnlQu1rdtaBPAQHILJq4sx99gvLqWvKBAMpD/O5w56r6QltdFSFXKRHXpBoP\n1UVH\r\n=y0kS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyca6ef2bc8e20220105.1","@fluentui/react-theme":"0.0.0-nightlyca6ef2bc8e20220105.1","@fluentui/react-utilities":"0.0.0-nightlyca6ef2bc8e20220105.1","@fluentui/react-shared-contexts":"0.0.0-nightlyca6ef2bc8e20220105.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyca6ef2bc8e20220105.1_1641356385480_0.15318532981339317","host":"s3://npm-registry-packages"}},"0.0.0-nightlyf8be6a7c6520220106.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyf8be6a7c6520220106.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyf8be6a7c6520220106.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"477ca45e60a28cd4090995b5dacdbc5bab6735f3","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyf8be6a7c6520220106.1.tgz","fileCount":43,"integrity":"sha512-VJERoG+S9XcCA+R8ctnE9TWpUx00bOxj+0FhhDA3Js6iTbwj66ZZdgC2xyn7K/jCMWJYaiPLYZQxV2auLgZJ0g==","signatures":[{"sig":"MEUCIEyuKY9tlGaX3kz6cIwogJKdGhLs8hzkJ5wcoIZsdt/jAiEAuSwHvjxiGsip4y3AKjWFBHMS/YdPcoHJKTK1I3ubwqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1nCiCRA9TVsSAnZWagAAVHEP/0pgkTER15iSIoaYcU/h\njfnozUxAA5B5g5ky5loe61a91nNz5cnDI5cSm817FmY+VTGbcgonTe2j9rzg\nFFPXN7YOaASHVN6mcoOcnhw7qxjhPbG97M/dEnX0QZNOPc9TldhWumpymcBm\nbqc80L+ML+30cklVZMnEycfzyT4ak1jBKdyaigFc40cn466n9tN4DxsRaajw\nDmr0nXrsu8orQHYSkAXxULZfwcydUVzknrlLeYoQvLnEf8PVn1FqRDFvP26l\n5dE9yYEaVlP21ogur/PM7LtOjQWtCjnWT5nnpEsYU5UM3Ff2N++laytF6O1w\noWKFnzSjdZ9SaNy/c49Z9fJ+01+sIBeAuCI0L91rDIDMe0j+n8KvjUBHItE0\nnTmf8CFM8cpLpBC25NfZmSrU9D27XOF/fTHTINgON3SPkZdJtCDda3OZ3zGZ\nhuKpaKN987vs6HU6nZuXriiKWEahrXTAY0yXn+mCy76Pa3Le3Xgz8Xj5IoRF\nJq7XqkXinVZgC/+X3lOISjQofCeMEHv7NAaxXOiLd7l0nDRA9fSH5j/7zrkx\nbygl9+kSEFOgJ/Yxxl0s+qUulPNcgSamAskXlaxn1nvlilhDUyu/vPPgz3L6\n49xdLh+71MJwjfTytAXRwD+mC7fAnkjRQ+Ly+zHcmMzyN3gjp3Q5bwq1CQrK\nxoxG\r\n=U55Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyf8be6a7c6520220106.1","@fluentui/react-theme":"0.0.0-nightlyf8be6a7c6520220106.1","@fluentui/react-utilities":"0.0.0-nightlyf8be6a7c6520220106.1","@fluentui/react-shared-contexts":"0.0.0-nightlyf8be6a7c6520220106.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyf8be6a7c6520220106.1_1641443490406_0.32468332842592607","host":"s3://npm-registry-packages"}},"0.0.0-nightly8c37bdfa2420220107.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly8c37bdfa2420220107.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly8c37bdfa2420220107.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"816886539014a81c7d34c8e15dc7d7ffeea4474a","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly8c37bdfa2420220107.1.tgz","fileCount":43,"integrity":"sha512-Leatrmnn79O6w3QspBYqONeqjN4qj9q9O40XxKC7GuCfWkIE9OCsLDEF4SKNNbAmWyI0602fUS3kvJlM5hEG7w==","signatures":[{"sig":"MEUCID38XhZ75KBTcuwrcFro+rfnlXxOokRPH9H6GSj/1tc+AiEA0Z7eaCi1/5svvgYjls6JvwaLJ35Dr/wgZp7dUF+Wcc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh179VCRA9TVsSAnZWagAAmPEP/RjPm8OoPVglrefMmAP6\na3IgBQWrFY6E2GHNV2sl1UeH+tpZa2qsynWyh3nm3VK59o17HcBcCd+QzzDb\nvc3H1UHK4VUC/9nqYKT7+khkkF+iOq3S+rZiqXkX4aWiuzyGYwMt/EHum4Th\nW5ZU9ktbcYM1W9YdjaKaDC4nqmrvzLEe6IYrHfc88To61cwSk/lX/at/NiVX\nfv1JUX7WL6qEkMJg9NHd3fkUOfY0AbIcqr4HkL/y2iHAo2Do7DOSFOsUzBhn\nmk6Ve2lB5s6wL02J7yFtmRZTVjLI9RHq48nQvOeZqL+QuuHDsF9FDL9DRjWk\nrl3NFVUg+K+wIpEdNh5eTC71Rn3GHb3tDl+2kdLW1UC0EPl8oOWK532h865H\nwbDAj/BMUWfZ8oz59tg/Ywo4st41fHM7zJMG0OME8c9BBgyeV78TvbChM2FQ\nuuSZpey2FmerZh7T9TDpkOI57Ye3W/OF9M/+Ku6XI5PnkaK8Gj1d9WlBvPHa\nxehVtAQAeaV79ZeVy/Ir2WN0NMgw3dSYhxmsNLaxYD4DcB0RxgwGHAhGVIQz\niJWOsdKNVbW9yzbk3IFR3zx4qLpJM8zuaB0xlnVGxjJ64hUyqFczkBnf812k\n9NR1FNkwRiHnDdfLja8zLYVBAkUPU9Br4GwT8xUqvYgsUabPZb0HX8ydPBA0\nWgCu\r\n=+IqF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly8c37bdfa2420220107.1","@fluentui/react-theme":"0.0.0-nightly8c37bdfa2420220107.1","@fluentui/react-utilities":"0.0.0-nightly8c37bdfa2420220107.1","@fluentui/react-shared-contexts":"0.0.0-nightly8c37bdfa2420220107.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly8c37bdfa2420220107.1_1641529173452_0.9561829050868851","host":"s3://npm-registry-packages"}},"0.0.0-nightlyecca467a8920220110.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyecca467a8920220110.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyecca467a8920220110.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"102821dfc8f5464921c13b5e5b2c4dae04107a20","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyecca467a8920220110.1.tgz","fileCount":43,"integrity":"sha512-op2mDKt2vg67BrHRwhibl1+AdUyF6MnKkhn1UikXQd3rV+rXGjzI0dFTaUs4HaXUfKSN8oyjjZYxwD4yLH37TQ==","signatures":[{"sig":"MEUCIQDaHnuty14wYs7T6AvM95b8sGjQMpPmTOi9sYH672AwhgIgH0U3pZX7WqkhuhmoUXCIndtWjuMB1AELaU2Qu0WW5+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh27MsCRA9TVsSAnZWagAA39IP/j3cybPxdBks4UZqR/Co\nREIsNmJ13ypvatwD+M4Z3gaeb67EyYNKnBhc0yxcbVAye0mz6KErJUNFmFnl\n9XxQ3XU3kYBZUErm5RLDlF/u4/MYY5pmGLhIC7uwLoGrUTrEgpZ6R8C7D4NP\nDOcIk9QQ4K3Hk2AS8JTXlW3ZxktQs/tQ5q4jFj2sg3wkI7tQgMz3dRdhK5Vb\nk35eqWUAmPI0O2oZyitmL/CetKI19xQU4YIQx6NLPzt96FSi3VQeGgc+lXei\nm8R68la835FXS4zZx5iVKwzPus2lyl+qVL/O224HgciqdcdUiRKIU433ZLt5\nGrNBa7P/BIZuzvCQ+qWMlnIubXdrckjD4ILXJC096THuIUZpSI/xxPgV8RR6\nxRqzkX57OerF4UJxHhPlhJHn6jByh4Fy8X2FMyatbezx2d5ryIe2NzcGr9V/\nGxfH9pLiYKIXRfxDzNNzFolfmkyVEXqb9pebvV1NQyeKlTcuy6EMcWurzF1h\nBeLvHrRB00rUrj+GOYlYPkaDBzzGPPECd3irQKeLSN0CP+CmQf9nfWH29HdQ\n2kXvteHOvcmG8+IIuGyFfBWrFEpXJroAPcxv3dxdbcqgHUjVmXKrhSJWqHAb\nvPqqee47jPBx6P1Tbi1+gf3hkujkoiyENy276Jm+qgWEiP3tjVs3bw/QGx0U\nd3zc\r\n=rCoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlyecca467a8920220110.1","@fluentui/react-theme":"0.0.0-nightlyecca467a8920220110.1","@fluentui/react-utilities":"0.0.0-nightlyecca467a8920220110.1","@fluentui/react-shared-contexts":"0.0.0-nightlyecca467a8920220110.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyecca467a8920220110.1_1641788204460_0.6394919640519934","host":"s3://npm-registry-packages"}},"0.0.0-nightly003de9a95220220111.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly003de9a95220220111.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly003de9a95220220111.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4a84cd1c2e2b897d18f4b9bd923c7e904d1afd10","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly003de9a95220220111.1.tgz","fileCount":43,"integrity":"sha512-DamTrG8I3meqjUQSrzwubCGuNJDMoeMXF4FOF+LGrWFW9E6HGC+PasLCKWKN2E8yTqsaHbE3m6mAJ2etkds0NA==","signatures":[{"sig":"MEUCIAPePWtOyO/TLFvs4PCLFH4jb1CrHXDJEWBTV56ITI0FAiEAxA4d93ekLAqdY+QGFjNtrapvptYA8xieRVbUlwTj94c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3QVzCRA9TVsSAnZWagAAsvEP/RCoN5solN81C1jwkRjh\n6jG9As05/UGW3URdJUU/RI+DrgeP2Sw4s+3mOtQirZSj7kiutZ0x2H6lfqvE\n/xXZ+8sF1gLDe7CJ9H6xvmVfTgHVuM3i+1MneLTlhr3iCHncNqLkPSbxLMEQ\n2QkFw3X6xtEQxikPc7ZEYaLS7BWZBpq1k3QDHfLoMIlksaqCOCwQCmDxhbV6\n7Md+znJkTcfMXqd8P2rwnABEGFPNnmXEsD5ctH4ZsjMmjx8cavSoymRh+Faa\nnXzVHPgNzQhwG5E9srbqzNGahVo6agxN3Sfu1theH1C0OkVG78uqQ0a4nj8x\nICwc8aA13zoYdkknupbRACwg17m+4eEjW99FDl4LXFgzEPuV/uL/OcZcRnCU\nS+CDChdGb1JPCE/P8tAHmnrtq2o3jmHLBz6ymJJZMZWYkJJZ0CLStXyNnOsR\n4rvfRSi2hFba9vKCC3dPU2pqhePdLKSDsfXgQqndqxWq3scTiv/0nfkEI8cJ\n0XC0Po4gKSK/RrEpErrv9YQXOY1tMCT0fy+oOMkumwua2vfefGa6ehgeTiaS\nIDaqvKX4fosESMTmFgun/V14BopKj2Pm2zO0mBB0YrLFFhrQoa96ddjd90o1\n7kHB5HqXZv0QIU2oA01BwSIf+yjKDLAOQ6mFvQeutDk1dgKzvVKBfpxwiO/L\nwLkc\r\n=rPe7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly003de9a95220220111.1","@fluentui/react-theme":"0.0.0-nightly003de9a95220220111.1","@fluentui/react-utilities":"0.0.0-nightly003de9a95220220111.1","@fluentui/react-shared-contexts":"0.0.0-nightly003de9a95220220111.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly003de9a95220220111.1_1641874802841_0.34144031035374955","host":"s3://npm-registry-packages"}},"0.0.0-nightly3bc051736320220112.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly3bc051736320220112.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly3bc051736320220112.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4f63dbf337731f54a45ce28f6d38e0ca8b4612f0","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly3bc051736320220112.1.tgz","fileCount":43,"integrity":"sha512-EEl8iBacypmbDZGUJ5oJoMfQh3rxLm6iBAc8nOmcwnTGP9+JUqCz0Ck8slbRI52OoCPR8PwB3x6/o+05focUeQ==","signatures":[{"sig":"MEYCIQC0Tw5c7g1FLamntGXOb8wltfsKElh74sZHy9NUrQytuwIhAIoB/nWy4TwMWZhqTeLQNbxskn2uiW+j4OAKjO8OItr6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3lc5CRA9TVsSAnZWagAAqEcP/jyEcBy5QgEiHJqzZvfI\nFzCgrw4pVA6QWS4CauJlAn9GohmBCGy2GdaTeOZKRHSnJuCuF2EwNp+8G+y2\nMsITQA1ZxYaJ6+bB+KZseXk1AjwC8xT2TPUjdN9RU310xtSV6U15Fe+ncYkR\nui8qWIngqIoX7/G689J9ZpDDliwa9KHLGAqteqbi+PJeETIiGfvvs+pSmR+H\noY72yA39ORJfFPeCxvugbkf83tKJICRt3NnMTSI6VgVINJ8WfZoti9aweBtS\nuY9LHcOojmQ/d/sYdWIIb+k0zzRSRUOjrDsswicW4RmSZvhVp8H81rGuieTZ\nspErvAi8+6NDmdk73aE6ADx8kv8urcPfDOSNh9wDZOII5MeE6qA+6mwPZmR7\np/t9L4+0+KNyVXHVKZx6ucLyaG+TKVRkTLj03dWWx6bEI+tYRh4PrMJ10p+U\nG0v52fkbV6/m8S5qbuAKQR6UYnS/NQZjD5nG37YUVTRNpurKnbhug+BenwLC\n0qCteXFZwLYE4sklY6VkmNiiuOurKdFD8rEPWefZ8Grv+vfTd+ahQyL8ruz1\ngiYKbLOg5h3xebNxpFh0M2LlUU0SkxKs3sOC9OutiXHakKTwhRRvpZ8F8DBh\nzA56EScMOV37IaXJ+HZd98tQ2JF4Ro1i2jvWkyuDLaIkSLXm/d2pxHgtMG9u\nxOgm\r\n=d7Pp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly3bc051736320220112.1","@fluentui/react-theme":"0.0.0-nightly3bc051736320220112.1","@fluentui/react-utilities":"0.0.0-nightly3bc051736320220112.1","@fluentui/react-shared-contexts":"0.0.0-nightly3bc051736320220112.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly3bc051736320220112.1_1641961273009_0.3676429186877972","host":"s3://npm-registry-packages"}},"0.0.0-nightlya9c3d10d9520220113.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlya9c3d10d9520220113.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlya9c3d10d9520220113.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"1afb5fd165ab5f5dda8fb810cc8c8752916ba3ba","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlya9c3d10d9520220113.1.tgz","fileCount":43,"integrity":"sha512-1SY1dw5p8tmeTIWRsiJzIvZfkoVJitnTwGYT0v1OtCXraOvshJ50EMRN2o537L3WMFIiWeav27qoGG2rI5/hag==","signatures":[{"sig":"MEUCIQCZzbaMIBGBP03aC3sg4qPmy31IrA6K553Dlyb2hHbBogIgcJn8feq35s4nmAp2xyZgixyhnOWUb5CQ1Uztjpp0gm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh36fICRA9TVsSAnZWagAAVacP/2rp1UtkUXJHqwpL7ulw\nG2M4i0ie3UN7YVRyFOuzmfomSJ1QOdkevSOPV1JlXrNbjGQeS1/Q1pYFUGIz\nfr9LRRRfBzBtPPyaj6mTDWx33TeCPwD4uZzug6iTP0vfpnUoSVnVhwiF2kY/\n2D7QVaUT6ycpoZvCA6hU+/NnaOHWjw0J6Xzpp9uH/aFqElAheJ1L7ZFouW0K\nQbraLadRm8Udlc1dsDHDxHw1LEvE715JtO/vfrDSJEj6PD4+u4WykvuAg2Ob\nVa4OJVOHhHdNCp4GYPlbgGRbBSm4qJCbUE4bBIkuIPcMDtPZh/rld2FlBxN2\nJ4pKhKGOO1VzGwI+rMeimVGLkQsY9fq8589BC2RVOsqmXC4+tTPrBBFeXLVM\n+EKK9uwyMjRoZhG+9l+J+CWDIASrV2WhAfmipGrbxYnZx5yGRAY0VWqn537+\nlezNLBVAMN0Y1zUVyAsw2Ln5hvV1ryfhGLKfbpTy8AC8L6mWvuRoGthFi/Kv\nINL44eaPG3mafMsNNScEqIAi2HWIUOPYThwP59fWVGsvEWBVZQMPs3JzKUWg\n38aBKMgJ3+xJvdUM0mRUA/N39RzshJOMrgbWLIZoG1yZ/Xmu/13QL8dXjP0Y\nA8cU9Uy9X1TTrTPFE4oNfWy2s77WZ8SvLQMp/vDWUbfkuyD0d8Jq2QZptO5g\nuaPw\r\n=5AC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlya9c3d10d9520220113.1","@fluentui/react-theme":"0.0.0-nightlya9c3d10d9520220113.1","@fluentui/react-utilities":"0.0.0-nightlya9c3d10d9520220113.1","@fluentui/react-shared-contexts":"0.0.0-nightlya9c3d10d9520220113.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlya9c3d10d9520220113.1_1642047432815_0.6967180040360876","host":"s3://npm-registry-packages"}},"0.0.0-nightly5ab766c40f20220114.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly5ab766c40f20220114.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly5ab766c40f20220114.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"6dbed1eae3e9a96d53f7db5273c194fb30540fc9","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly5ab766c40f20220114.1.tgz","fileCount":43,"integrity":"sha512-mcw1IjfUcaIgQKdqtF75cMQ/GMcqv6pPs6nbyNnbTr/Trsw3IGGow1j2YD+TBymB7fGXmo9SpFuosWZ0DEM8+Q==","signatures":[{"sig":"MEUCIQCTmuUPzOANdDTkNbIrwXYMSMfDCR+KWF9QEW5njo+ENgIgYGn0U2DKUOW2HbaGUmDR9AvFdMdpTwWJB10KYHfHXx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4PkgCRA9TVsSAnZWagAAofMP/1X1PL2NHLYzz08IXfd2\nMEf7j+FVysBkeFBKw8KJhd/F/SOhbe/6RD0rrBYdoIr81YzX4ArdyHHcA2e7\nvA0dAduGKaFqVYwLGX1RzK7Wol+1h8CGZCoWaFpw4TN35qde4TfDyrx7OLAT\n7HDb/wfxiNV+WXi1eDOqkXAFSGrWleNHGAykGltukVRsPNJrG/IP8LCdX+8M\n91EVY/Y9eKZL7ein2/UCGoypM0mbqkw+BZC08dE1rqKkxhO89GYfMij/Rbfg\nqntM08kwk3S0g0pOlNIHPGPf7mIppA5bB+HVueaQNvS2fa5f6C/wk7VnexkO\nsIZGWVI51nLpEF7KnxH+0lL1aHd2Q4x0mAOznyIW3nwgqo6+w4r6SBVjasPq\nNaqAJO74NOKEBZRwYXpD4xIOUWOkhnpCu//a4yDTVL0ydvOs30AOzxxsiyDb\nuw1/Ovu0FN2Xj3rf4UgzwNppTXz1NmBpYucrDPHML2CvjXAOjJPO5PxkzHxb\nJrmErXDqo91SDOarnyXG1tQzhx1klTc49lAK2kHygWLntkyJPL6C5YSISXuU\nFQbQsmaYD/ENZLFjsofJpsY5fWhhxFEYfqzQ4mlPoZOktL/S1hG+WSDzJgTX\nlVFAf2eGPdMEFyPmJLOtQKzOPPJf+FEAtgn/zFCwQUyTD8gU9Lfpxj0YO94e\n7Y1d\r\n=kXWv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly5ab766c40f20220114.1","@fluentui/react-theme":"0.0.0-nightly5ab766c40f20220114.1","@fluentui/react-utilities":"0.0.0-nightly5ab766c40f20220114.1","@fluentui/react-shared-contexts":"0.0.0-nightly5ab766c40f20220114.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly5ab766c40f20220114.1_1642133792285_0.17842462504439793","host":"s3://npm-registry-packages"}},"0.0.0-nightly940a86cbd620220117.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly940a86cbd620220117.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly940a86cbd620220117.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3de307e05f3da89aea71e515199a729188e2a92a","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly940a86cbd620220117.1.tgz","fileCount":43,"integrity":"sha512-ocNhgRTLgnOK/0xeMIjy4o7vOwT69r97KIixIsNTUnuD/3/6xMQEvlvvhIbQjIoJ6xB+Dusvcuzz2KrfXkBXCw==","signatures":[{"sig":"MEUCICPyHon6oSFeni/nMbzwUfJqyPY16UmTYINp/HmN8jTdAiEAysfe8ic00gD7zV2zC4k6fPcrPLx+jLZkejJX7fY8MM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5O1nCRA9TVsSAnZWagAAQhsQAIhVXj589SRb/MSFqNws\nMGJpFFvjzV4L9NFtKTZrqnanLLawIB9y5ugAhjHbhWCPa4B4N6QAb4XlTf4x\nw720cEV/rspiy+vyBUWl8EWDvU3MsEZJJ+XzxnCaoqhFKZbMHIDAo6rMficV\n7IvY6ZLh1SeCHGC9FyGAXTBZW3CCgrhGa6Y6FiJmmggyE9KAsLj0y7fYABS8\njUEo78RxZhB8n2+4gPB5dlBzPkwk3F/tGlTDYJX/1b+tC2G+PnJvnHzIkGNf\n8jlfRnhnjfvXw/rR74/iU7ZTpybU2VPcxSRERuWh6jxS0KwGurg043WJOK7d\narDgd7FYdM8wsFyWKbLjqd8XXOakz07yITYk7u1Z2YM8gCrrvH7ciVYCipWZ\nBzKHCZQGu8HG5cM6i6OK65oTP5XJD71V10BJm8w+o3OmpaYz1X+gfY2zeBIq\nKwfl84HctCnJc1RJFdxOUCQYfu0oFPO1K2RlQwpYJpOZEQD0KSUmNCw7NX1y\nvTIMrOEWumBLrcbVx41laBSa/KjwrYo0kZoc9npNd5vXIU82tBnwHaHenRwj\ngMFG77ZqDfgz1QHAti2WcoN3B6kUmCAjNJ6izLg1MJKm8RlP/MAZt4GgDtMf\ntOYEz/RjyqWmN+Z+B/cCVYkgbO6Sekr8HphQvzGbD2hp/BqMF0T3ddLPNNcD\noJW2\r\n=TRLf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"start-storybook","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly940a86cbd620220117.1","@fluentui/react-theme":"0.0.0-nightly940a86cbd620220117.1","@fluentui/react-utilities":"0.0.0-nightly940a86cbd620220117.1","@fluentui/react-shared-contexts":"0.0.0-nightly940a86cbd620220117.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly940a86cbd620220117.1_1642392934926_0.218471625125507","host":"s3://npm-registry-packages"}},"0.0.0-nightly8dfa71215620220118.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly8dfa71215620220118.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly8dfa71215620220118.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"796336b8bbc28e40c56b879c4d99189cdfead374","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly8dfa71215620220118.1.tgz","fileCount":43,"integrity":"sha512-UuYoXENT9y7M9ah9p28ygLJLDntKrma3TAUdOMo29IP5FJu8pIrn+15JvBPlo/NbQPqtVp7c567/+Pz1L0FrKg==","signatures":[{"sig":"MEYCIQC9tInNjqK/9qgcVUEfQEfMMO+/aBXNdO09inFDlhye7gIhAMMVwyoK/y43eJtHLT8fogRnJEvOsoQZ/o57PH9lpHy8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5j8UCRA9TVsSAnZWagAAgbAP/1Bw0qJVK0cdCjYL1IyA\n2ezGY5b9JV5pLwi6FpcDDmrSyTvVaYnt8ksVlGaBNtal3EZYFG6EBd6qpRNi\nBqnCm7H/l9Y/ULDzmOIYvJNoi60cvNGMB9NlsvEKmSvNGcrC80VUyvJz98bp\nXc4PxUcTSJAqi+Mt0JYzvgmZ1Uft3Mi+e3z+sP6V49/4DEvkPEkfRi3zPVEN\n0hw8srpChXplMhPHxFl5ne8PKa7xNGcoKYo4nlS6WhETpfOIZsPHj/hEa3kz\nvPBGkMjwW18o0rxzKldlRGZ0QXq9bkNZUc70hpbqurx4Q6LoUoQKLj0Wy+kl\nt3JlHJ/NIrq5lPgr1r9JPUlfmKFpiYIRjBKVl5E8uokOR80/iG5DBqZjkCHY\ns9H9qKAt3X4RsVvzwgGPvLWMOo5Q9DKr/NH+iX/GyP7WuVAiQtgf82AGlQy6\nvZMMUkYMFSG44TY04TvfY6KspXSUJb+3tfmk6BrcK4fwZ64W2lkEj2bi7VX1\nsCiOYi9Q8vfuA/D+y1Iyu1166eXlBevT3bumKiYk+jV2sj6grKYru7PY69Q+\nUgX/k1lkqzTs/JGd2q9VnTcrm1WeBMPQG4CsVmqwwXYcdVsDHci0dnCfvR+M\n3PyxofkyAKe5FGMvELjs69MmpuVX9WUAvEwyY9YZNNiZU0jR0BXz982sff2l\nCJA4\r\n=Vw5f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightly8dfa71215620220118.1","@fluentui/react-theme":"0.0.0-nightly8dfa71215620220118.1","@fluentui/react-utilities":"0.0.0-nightly8dfa71215620220118.1","@fluentui/react-shared-contexts":"0.0.0-nightly8dfa71215620220118.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly8dfa71215620220118.1_1642479380102_0.36674863965721194","host":"s3://npm-registry-packages"}},"0.0.0-nightlydd0f007b3f20220119.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlydd0f007b3f20220119.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlydd0f007b3f20220119.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"62d27d9c413baedecf583c32c2192b6f46029e55","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlydd0f007b3f20220119.1.tgz","fileCount":43,"integrity":"sha512-qyWZmOqmQ7uRjTHCj2Fl4zBUfX9cidTjVxVKtu7k/UDtHHVpBmCsXQlFhK6+TFoOdrcATAuTfwJ/BO3Mg3hlqw==","signatures":[{"sig":"MEUCIEz66MddkOBYQuO9mrrmqxNUlGCrq/PZ8XRhnWoo8KkNAiEA3SNRNtSEpnwUsvG8TCUsOVnl4p5HfAKPdpKvjlaIzAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh55ERCRA9TVsSAnZWagAA1yMP/AsFoTVxbJZC366LfvSr\nFGerec/hke4S2mwR9ILpJkG8+5jHIU/Toy9P9Ee80rQdIWDw2kAFLGTH99PS\ned1BcpebSNC7jUZDN4KqNDX5SRjSA7cW/SbHTKpaKyJ+KlN23YOix/MSR/za\nfsxbSoNnZI6Wnm2QIv9ptrc5OniAyc/CHfqHjIJpksJ+JUL8ycAnrIZ1GVJo\nJeYGmGh7x0f4SbjsjzbWlCEV1pFW9qLO7qQwtuKvGMh8viUG6BKCi4KKdWbI\nEypM0a6ggbn8aCJJud91HMs54YxUxed+d1oPGSpLQqFkmTc8EwUz5SlzAHnk\nyLFNMoKTXW2SmRPnUdnoc+fxRUPqU/UtL9TRHrCfYt4pen28EF+iKkpaK5rH\nkjGbVveXdSW64NfFoM7VCH6XQ9V6nAZtwCAt6Y0kP4ORS0D+y9A8VcrG+cSx\nZJvYiOaBExec0Buik+hQSkU30ylZ3HSLduI6kjudFIG5QP7aMgGoXsmlWKak\ntfpeBcH5V2EnMjpcSmbevDLPvI8SCtjjMMkaEfXOk8+AEwx8v8um56h8a3LH\nisVLiIRT11CH+SW7yxZOhaSmh3SEUJ5SndgNLk4mv/tHaOrg4Sdk0w/vPD62\nNQGghI3kFWz3k3qowzk6yta7Fk2+gqPG9xgaFvV8B3QhfCSBboI2DnkFAz8H\nEqbq\r\n=/dy0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@fluentui/make-styles":"0.0.0-nightlydd0f007b3f20220119.1","@fluentui/react-theme":"0.0.0-nightlydd0f007b3f20220119.1","@fluentui/react-utilities":"0.0.0-nightlydd0f007b3f20220119.1","@fluentui/react-shared-contexts":"0.0.0-nightlydd0f007b3f20220119.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlydd0f007b3f20220119.1_1642565905571_0.5385065539811185","host":"s3://npm-registry-packages"}},"0.0.0-nightly63afcc343820220120.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly63afcc343820220120.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly63afcc343820220120.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"c0b15fe76e21b1ad7e4ca0da4f3260f2c3fffb8d","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly63afcc343820220120.1.tgz","fileCount":43,"integrity":"sha512-as/6pstEmwTe0cKLw4VjaeCa1pSwRlyjaob217YKLPoDFni4O3iyPrpbJAJSRlylAwNIrcCu5TRiXwntqpw03Q==","signatures":[{"sig":"MEUCIBHYje2ulSFYJdq4hk5FTm2Oqce1MQzIQobZSQKyC5RMAiEA/V8zHjv1rB6mqfOO395NXu9RVZalPf+UVrvmqDGa7dU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6OLVCRA9TVsSAnZWagAA7h8P/1zpFzeBto/JY35flz2e\nHI+Nzfj8XgDZGb/wlITUvlK+PKapMw/PhnUXJVn80BekNcy/3SWk+O9yrCkm\ndNyWZI7PArfwXEvtdVh0Sz5KYhNQEarUNIgfksqfDpKCWm8Mxtr4QfKvYkEU\nR38yrAZtUG56ATmKXyItinQY6NuOkBRusYhd/QpSPT67Gi/62GP9gVKbo0Y+\nyn9Yi2u2AxgVlyB5k56YiqQivjY4w2+2EAaMCph9ukkOO62Dz/dzBAwx0IJa\nxf4Lu9vmDKMMSfIQNtccuaphI1NcufKtuToH+PEyFWjhNo7WFwQOb1Vd58G6\nf+BzuT5Asi8rBWumZPgaLfOTqXBxKwdqN6wcoJiyAn+0OLH5tOx7b9JO+CgX\nJ1E7hFThTkECxo7qgFyoDiTK7cpxFPGihWLO1WldZtRg+L0HxkFVkY14vA69\nleiI9xYcZbnc/cSFq8EFPqelOSr6wF7sApuQheBkiAXuV9AZx7ES7exq08qW\nZqMFU0fWw542Ajc4QGQFqREUd0IvMaM53Lf+SyEMaCuXCHcY6o9PGhcmMgLO\nLVaYF9pWMSZGFmk/7Le8nWLzWTbBCutFhdbArCexF1ZKtuYHXEKyUH3ZK7OU\npYXtVg2oKFuQPdo90UM/11aMGclGzTIoQ3J1zifbkG7/aXMqkzC7l5vT0Gm3\nMHb2\r\n=vu48\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightly63afcc343820220120.1","@fluentui/react-utilities":"0.0.0-nightly63afcc343820220120.1","@fluentui/react-shared-contexts":"0.0.0-nightly63afcc343820220120.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly63afcc343820220120.1_1642652373683_0.33208729986877095","host":"s3://npm-registry-packages"}},"0.0.0-nightlyd514b3e0ee20220121.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyd514b3e0ee20220121.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyd514b3e0ee20220121.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3b9e730f1b903bf2cb6dc4f8456ad440c90ad249","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyd514b3e0ee20220121.1.tgz","fileCount":43,"integrity":"sha512-37fPnk4rzSEOaJrLmlRRYoCJe6xw6hv3PrLViHwRS4L1Ni4M6wd/5EpFrZMZ/y9s9QbP3kqyuobUr+yaURhWeQ==","signatures":[{"sig":"MEYCIQD7ck/L6URghiLwgJGGlQ83bUOL6WPbyz8w935Iy5sWDQIhAJfyNWobCctaf+w43WH1+YU8aFbau3LShuFC04N+0gEt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6jQECRA9TVsSAnZWagAA6UgP/0ovnsEwxQLd64u+ViT9\npvs5Mp2rzY/EapJKWAQLYvFwNDfo4M7+jP/74OnykJF2pSmE28BzWxqVoVRn\nhasY7NkvY/6T6VYbf4k0mPnEOmFZhvvZ8QZ1jL6nlpOn4fOFplO4A+Ox7GJm\n+MxBBdW/SXHUF6DuRJBFGyYR0Vm327RB0hPCJG3JCUecO1D8rMM70FbEpNt9\n3Hy8iFETe7zgxlRMpkTHAb9HTnGWSG2qwu8MaoHP6OtEmQcztjqAo0mu02K/\nDMIJ1OZADHYoYOU29jgaLhn3DZvVB7GLdCeUi14+vTwVdrlSI2JGreHQC2Lx\nION6am9QghkQje3cfgfB6s28BSFEjTgmqb/sLzN6V4Ek83t46vDWugu4VOdp\nln7rrtwUFE7GHLi9QCetaUC2pPdUSjsLO900rO/pMTwyQNoL2GKcwkUhRnvu\nGGBt0+M7u996xEKRHk5AU23PgTvEuIz4YFRmNp8MzPc0Sf0Z0O1U9KblX3Bv\nlV1BeQT7NwSNO2IVBZCC1UmNCTE6GsepYlO4TPyK0kBv3d2QWUTgSp55zZGw\n7iUupD5uvYsmp2ldqUxqvTxVAZ2oKMxp/ibPqjhy6mImTFllj7KwPWtXmh5o\nD9ELr/U8oAqZ4843YJ5KeCxezUzGCDPHFEkKPthgyBD+zFJmpfGQrB8nHKtr\nS7Sh\r\n=pJZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightlyd514b3e0ee20220121.1","@fluentui/react-utilities":"0.0.0-nightlyd514b3e0ee20220121.1","@fluentui/react-shared-contexts":"0.0.0-nightlyd514b3e0ee20220121.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyd514b3e0ee20220121.1_1642738692359_0.3503552756200736","host":"s3://npm-registry-packages"}},"0.0.0-nightlyf6116328d620220124.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyf6116328d620220124.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyf6116328d620220124.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"46a1b8b1544a8b4b5b2f3511af3d03ec0e3364d6","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyf6116328d620220124.1.tgz","fileCount":43,"integrity":"sha512-iHw3dd6KoYD6zAeJu0kCm5A15wpX/9hxkszU9f0iK9n5wl/d2M3Gnb2IUhyKKYAvb0RItsyuzo32lzCtus3+bw==","signatures":[{"sig":"MEYCIQCqAKNfxmGQQjm7kQQO3b3PuJLvzG7ah3mLdYZAdsDlwAIhANtK5Yj+wK8ECa9BOen1T5sHv1zy9zo3P5s76y1pxrz7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7if1CRA9TVsSAnZWagAAhMcQAIS8wRRcaG3K7BiDTPrU\nuC5s1FbbuD/lfF1Zqmze4JT3S+5p1HfMa1Nb872A3ucv/Wvy7tQRbWRrq2vC\nmtLZFThxcAohDdhVfZob/e5TI5+XJUywEfO5Iqx1TOO5rM1haLMkzt+Ow0XD\n3pVBQiRAbdZ5V3JCY3aYG5RsDxcQRAJg3Fn2uk7B2L8HhM9++TDvmRW9i51e\nLx08feImMyGJf2RvY/HVcFgPBMaCHRFE3fsCk+kxV0padaAmIPy2LXxm0qBV\nU8V951vl2XIRGs63Mp8x9sioVIfa1L41pj9ludQe3SfKdrlw5XM12dewJcpq\nafJLjE1QjUw6lT1g/k1jlPEIP+NNyK+qnZ0Ixk4Z2gWoKWCQ+sVRq8E7FpyQ\nH7KVoDph9LrRmfuZoUZLVa04UpUJ/v7SxsZ6lB8BfFmPazQ2CY9jScGo5e3a\nTjB1WuJe2mwneVdrH35nrO3BLNEfEI13j+J2XYM8/OUCaw10eLPQvXd9TChZ\naiTfPDPTzqmNOlwhaPtQUDqysSM6rgR68bXl6yfJCf4FOvgSlGYjTlhYLJoc\niUBBlhx6TyviZP2jTimGuU5cj1Nfo+XFMhDynTfc9R0JG8gUexZRO/IAgQjn\n3lPR02R3Bk2YrWnZo/21x62Fz/rwjvUu1jpitSfDS518YlaQfoq6mg/0OwrL\nb/iP\r\n=E2yV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightlyf6116328d620220124.1","@fluentui/react-utilities":"0.0.0-nightlyf6116328d620220124.1","@fluentui/react-shared-contexts":"0.0.0-nightlyf6116328d620220124.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyf6116328d620220124.1_1642997749185_0.43610424725741836","host":"s3://npm-registry-packages"}},"0.0.0-nightly6a6e258c4020220125.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly6a6e258c4020220125.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly6a6e258c4020220125.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"db359e9ef3152dc4afd19d3f87adfa56f1de01b5","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly6a6e258c4020220125.1.tgz","fileCount":43,"integrity":"sha512-SVbVX2dUU1zWqHY/bcjPK/+E/kVCxHhk/qPF0OKxsBoTkvLBqGgWupz4ZzqEKvaNNKhaWMpM70dP9QztJQRUlA==","signatures":[{"sig":"MEYCIQDW0G7srckgYpbmVULAW/9tA6/NbzcDkJnedsxewdUKCQIhALzqiwMhEj2UeouSitVjqd/NDaJGvZKmrjuDEE6c6WDq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh73pICRA9TVsSAnZWagAArK4QAI4Dl89ZA2JJmxlwnZyG\nJPMv0YqennKSuhjjx5fPS0NtJghQhxcEFXQpw8F6TVkydcwPf/RKsAR5udTS\nkwYnxxaB0hua/hfnXIMhsUHM45Mu8P/XUqM8m9Ig4oSeV60pursLrkj79XS5\nv0mIIHQ508PFzoJjEoThAqGFoprbQyhAYq6lFF4UjIofq3tdNG7m030dn66P\nX1LtbMVbUfR/R7W2eDlnM2mBpImgnNodD5rtW/YIzcRmkOocuiBK4JqaE1ho\neCdhEtFmYHagL2FXfmbVTn4rfsFJ3AUgHS6chxepMjedSrHUrO12zS4rBVL0\nFMSUTAjy7LIHoZikWGrOYkB4H+qpgjpBDIZTJVysDieaLgI693DcQFAxI5IC\nCMSWJiT1+LN5xraHXwaDVXIiw30KUqENquslETe1KUlRSF9h0GTMEEDypuib\nvNBOFOolTR1ZqbCcae0NwJ5NnOWBPqYnp0sLgzPz6mc8IkPTkhUEdwitfJak\n67XRkO2uozG9+ospylWEmLSvVGwCoQi6NJK8adx/5avc3jtbbP9H7PMTiIf5\nv0lvMl6j0kT1qamUfEo4HNH9Pumfl2yxgfkngUC1rrTj6rxGXPxor+Kx+PLG\nCZIDmKhvXotVbX/7P2aH9m6BALy8WVMNoEC3RKFl5EUXd51UPJIYkZliG/4p\nvZ09\r\n=JdFJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightly6a6e258c4020220125.1","@fluentui/react-utilities":"0.0.0-nightly6a6e258c4020220125.1","@fluentui/react-shared-contexts":"0.0.0-nightly6a6e258c4020220125.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly6a6e258c4020220125.1_1643084360491_0.5737359230168708","host":"s3://npm-registry-packages"}},"0.0.0-nightly0bc161458e20220126.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly0bc161458e20220126.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly0bc161458e20220126.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"8cb615225609c5688e05a5da3ead13cd3df56578","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly0bc161458e20220126.1.tgz","fileCount":43,"integrity":"sha512-KsazTB5M/kXX7Uwx67dNjCAZzMTaoV2qINUxOQKodftTupPsmH9K0DNAl08AY15ULHtB4GZLs0VuxR0w0IM7YQ==","signatures":[{"sig":"MEQCIF5Z/VA6t+tNWkCe0Sd7qjpwkoAynvErBDZOZn0a9haDAiAU2wU82K2dEqgEEno2aAD+wJUF2h+F0fe+rXbwaWUOdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8MuvCRA9TVsSAnZWagAAUDwP+QDsg14XDXGsXWkXTU+1\nP+GvfcCGKiaSmhiowQ3K301S57FX7N+zVU8BhMwwxTEebekUOc9BGvpAw2l4\n8ZQuXaigl4fZD4vQNzOwOemfrE5PLvriDL34dXvGuX6hCqIUfwu83KVjrL8j\ngcG3N0JWP1+AtA5IfUcqx3NX1W2seNCdan2hmg4D0CONuA+F47GTS32/Q0tx\nZzBXNJHiy2RShutia2xXGCnzQk9pcfohJ55nxLwap9oxZcqCPma8wctSqNkU\n+ppf20IDYhrISAqmA/Va5hb3OT6sp+MNHZ+HefsorboENOyAR0LNiz7zEm7q\nUbHLuKGTuQ9qsrlDFV0OJjkcwXlKGypYRVzeO0gvT6cbyZzVQmm5uc97irRg\neffGouHs91rKkm6CSh3AgprWHscEGABm1n7Jkrb7rTvEPGmbosYjObfxP03w\nlmjYNSjTysX+vZco1NC6lDIWO8boosAyfcAN7NvZXTtj7HfsUlR5vHQR0i51\nCdSVAt7XHaxT6eTFD6SqfYz5473UxpH66I+CTNielHNX2RDHdvpMxqBK/js/\nHBR4FA6XJoqs2Ri22ki4wZRgr9xbLNwVER5OYdapezRJYDjidL4xkMSU1NIt\n2s+uwK4P45+ilRg3NCW/MuLBWDtRw9zrt8Dgag2I2XAlLwAOhnHoOmgeNe4y\nkCLm\r\n=p316\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightly0bc161458e20220126.1","@fluentui/react-utilities":"0.0.0-nightly0bc161458e20220126.1","@fluentui/react-shared-contexts":"0.0.0-nightly0bc161458e20220126.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly0bc161458e20220126.1_1643170735672_0.5071424336068371","host":"s3://npm-registry-packages"}},"0.0.0-nightly4e6470c86320220127.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly4e6470c86320220127.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly4e6470c86320220127.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"aa6897d10f1b326202c2a78431b6014633c47bcc","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly4e6470c86320220127.1.tgz","fileCount":43,"integrity":"sha512-B5bKwHDwzgefSIKO2LadqKDOSZfGdLT8xHLa/grF6n1UB/+3MIOrTlux3U4Oxs1EITit2AGSvRhrObh5LS4odQ==","signatures":[{"sig":"MEQCIANuagwgWxXVlEwp0TdLjYgN/wLt3utW8KtnCTxkINx1AiAVZLs/FAWaBZuYSZPDrnr4rTd6od5XtMPtoMGge/OfNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8h1eCRA9TVsSAnZWagAAXyAQAKKahI+tbRbNH3OaNV/i\n8koibXz237ee0wbp+cCYkZadTShQpQ/5MhtgIYbjHDdRCmDcI5AlnnL59xem\naerBwyFknL06bgUhtqG/MArMz0/jclTsWO2q2GpQXCZ5W0cZ8MksqQUVM5G2\nZueXi/XUkPxof6gfgawUCqt0N96fqHwpx7yd+UGdt4s8lhAshzyb3hdf1Jkm\nEahh01MvFFFKIK8/qlTSE9b59em0apU79m1nIedg1xg4jnN5aVseuZnaz0TP\n5/G4X4EKZuVyIRpy0c9dPHehCTz+hn5dZlveqgx3gxIwWeP9HT2/dWsZIlQh\ncotCGNsCDLkj4YE1XrACWotefZSZGVJnvfwulqbgpSuR+AsjuZIsZzA7erCr\nis8qNEWWjdBV3XbAdbTQ4l/Jnoat1o1JcXJTX4efPCB4wk1+QkR/YFq3PKls\n4laP+KvBFS8sz0FV///3l4AXgtiT5SAfYABYaLzJNyFk7xOuitqP2B+PZyFt\njMu/AmzVBFs8HP9xKf7Q8VvEGo69I862E6nJMRRiZGgv1IVSyo+j9EUEYVpo\n3l1V1SY2TZY1CDiB3N5GIpOFsp/hiO0sQsumESPGwYXj7AAsCCbqooDG/AZ2\ngx4X7NAXELeek+syTRCmkvVuFqF8KyPCZZHwwdJ3H6C5nJaEwVCAN2xrx4qK\nYfcC\r\n=/mNw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightly4e6470c86320220127.1","@fluentui/react-utilities":"0.0.0-nightly4e6470c86320220127.1","@fluentui/react-shared-contexts":"0.0.0-nightly4e6470c86320220127.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly4e6470c86320220127.1_1643257182407_0.7686116216626453","host":"s3://npm-registry-packages"}},"0.0.0-nightlye0b8e1fa6920220128.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlye0b8e1fa6920220128.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlye0b8e1fa6920220128.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"019c09a2868cd31766f1ead85392ffed5110464a","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlye0b8e1fa6920220128.1.tgz","fileCount":43,"integrity":"sha512-0N764az/NWdsUeOgnnOHNrhTBJXltZXIoQsSimHhsTE7mkCUbZ+M7ydHBnkjEZbdjD7fyF+/sTGFBuiNAJct8Q==","signatures":[{"sig":"MEUCIHlV72/xzWO9PmWtSWucfdSHCZlSaTY0oGdT0Q/zYpL2AiEA5jRfcFBJW72a9q8ep/oeGIGafzMUjf/NAEBgcWIK0rY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8236CRA9TVsSAnZWagAASPYP/16ozm4i3lLqXHQSoRPl\nEo775TpAuDIRoqRJ4Mt+btrYPa0+yD50pO29WkyQ8fm6ohwYznZcnTDbf46G\n77eAXTankdZ3oTkqw8oBVdkAIVkeyPCw8YFw0qTcM9GDcf7bbQdabJKU1332\nlO8WudL3gzCvrIGLbQ49chw6+gPfpkcDz3uegBXK54Yk4jjdxkjuxpVbBGMZ\n5KzhzQBBN9fJwLWonWseK+gyDAojnc0jx3gGDVmu7SFdAiHNHhOq91t7eSlS\nvriC9aACx+hZiUXlJEJU7b/AyF0WQ+bU56myWTQZCOtjwJKshh9K3tx3wj6h\nrfa0G104yTpYh1Nlnop3Yh6uQvxThG3NukM4H+83Iul4aroAINjQL4u5xutN\nU1XVwsfhyKcUjBAkeKydRXagJwsJ02NX9t8cbxpltqdAh/GKl5uyR2QBZ7bo\nGAh+6EtUlLYAx0GYS+f2nkHYzAtWA82C0X0VJJy0Di6Zpk8JMyxyjc5ozwkK\nZEv5U5LbnI2ghuPjG9ImKBtPxg+JMULoOBYGERBavf0CFxT2EokCc9HaksLZ\nVqPBbFzLrmMAtUc/MEVwePijzWDshFxSeEuej+D5Gxs9AY9yi/ftHl4Pci0U\n/hWgy7aSHDBnM2qpocq33bqq55kuVrDI4bFCOE/98qUkWW87fh1AK6mivJd9\npEm0\r\n=h269\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightlye0b8e1fa6920220128.1","@fluentui/react-utilities":"0.0.0-nightlye0b8e1fa6920220128.1","@fluentui/react-shared-contexts":"0.0.0-nightlye0b8e1fa6920220128.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlye0b8e1fa6920220128.1_1643343353849_0.7384941023563256","host":"s3://npm-registry-packages"}},"0.0.0-nightly940de09b9520220131.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly940de09b9520220131.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly940de09b9520220131.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b47e49961e882086586cb71ecf88b8c1f9f1ebaa","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly940de09b9520220131.1.tgz","fileCount":43,"integrity":"sha512-YFGHvkHs5D8tERDAsl/McWLbSigkhXn3unHENGz9OlaOcZrJpYOMn3D5mnF52TrgYjXemKrFK7QT4U1u2vb9rg==","signatures":[{"sig":"MEQCIA16uNNJAxx8mFp485IYJ+ppK7LH5ppLjGkx0Qoq4n58AiAda4WPsc5zvMOE1uRjVAvvBD/Gi3eYCsgktNxb5hBnmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh92MmCRA9TVsSAnZWagAAOFsP/1E2+DJ89rDyfVWOBeX5\naA9CfKViIwA2Pw/IRJ6mlMMkvawzisUG6SmyJ8EYZbD5FgI/O7xe5fGnkaKJ\nhs4PEDq3wVsTGdv8CCbRU/bVnigNKnl+wtBJqs7PoY5k5bzPO/aalwnlvUqK\n9LO4euVoX4QBSsqpUskCeYM3tTyYaB9F4+k7R+2uUEbXCpGgYZseAZRQq5zX\nzJJ/NDj2QAq9HXHyUs5MVDqYZNottktCzOwMubKjXUM1KB1JRt1hCD1QxcdS\nf17PSALpXtOCA9qARFETeLqVJTFzHwcDha5sRgCxpVt+FR9zwZzPHzqzCTZU\niuVTJWTbUItclIJjrTx1jMLAHywKcAUodySyf5Gsayl4+qMF234dzAIXQ7pI\nTZU1sQT7z4pjRh1bujlD21y/1R6ofojcLkmNWZ38JKnrLD+ppmmOV/mLfBfn\n2DEph+nWNSlquvhtyJL2MiQGEEHOWeUapHW+YoDCM8T7/hZqW674ClLPUlaz\nVg9kL2hadu6rbi6kYTHhqKprayiobE5zJSvIjcGYdVSso2Bb95znmpFoHiN+\n7ldbhDuhxGXcKqU7YDpkl7bhBccKl1ZM7D7ooL4vgAVNKA5G0qsUlJDjN6p0\nk2zlCynOxPQMgIAa1U2K1Mv7ND6NlJcFyQmoPT26eCa70LZFrT/pM7Tl/dEQ\n9i5j\r\n=5MPp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightly940de09b9520220131.1","@fluentui/react-utilities":"0.0.0-nightly940de09b9520220131.1","@fluentui/react-shared-contexts":"0.0.0-nightly940de09b9520220131.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly940de09b9520220131.1_1643602726424_0.8580699284466966","host":"s3://npm-registry-packages"}},"0.0.0-nightlyc49127232120220201.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlyc49127232120220201.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlyc49127232120220201.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"e2e8db8c8af2c9f71047a3ef085db3d1f6487f29","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlyc49127232120220201.1.tgz","fileCount":43,"integrity":"sha512-NJ+SPKp4AvNY9DCK2VGlP1f+4rnQBF+oHh043A04psxL8AnznNQUOakcD3kvBFdnC094UNqsbjcUp8Ku6KkfWg==","signatures":[{"sig":"MEUCIQDQgci/BHtzBSm+nkZNbd8dxvyPVZZxGaVwiLYd5dGG8wIgDJ+4fVp09t1CyYI0T79/52RdR5CfexoE0hQByB2sIGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+LRHCRA9TVsSAnZWagAA6JEP/jgUHfeGEtLZ5F/TYzu/\nHW1dI3GuRiwt384/zkrqIZZRdKVSTIbzo5Md9jQK9ybkvlq3CdHav1qC9YoB\nydcZqk7zNyVNjw/9N4OiFnOyGZwVmfIyrx7CByO4gl/lAxJtfVly97xbi+LG\nsQ+Lc2WQBV/JVUNAsiaOHqragcDdhgCox4ETeefBw/yu0cB0Rk7HJU3igHlL\n1HSD/PzN6Q0klXvQ0M2L3nAEsdUoE9YKGfNp8/12rdf2qOiIjWI9mJef15RS\nSUQEcg7ZamYa1XA7kz9O6+obySespqBGSkzPtXfOO+Sqbnvi7z6FPqNP62xi\nPiN0q/3w7M3v7lqXEFaYVVB3fEEl7qUPE9EQ/j5cqBAle/Q2o26mcSwro50L\ngmpKz/HfyGifCuVPyEHUzB/pkQAiGH6XGtbT5agZ2FDc6b8+wwmyNE0Xw5Z8\nc9/uOSz+kCxv1yQD892bBvdpS3e7vIAhA0HoIbHo+239VOyzzLUvfPu8pcc9\nWfSd9RjpLGZIUvkZH1RwRtql5uyXVpUJ9ThPPAX75nBK7KE1Z+R/yf+UyFsK\nvKXYgYu7d5gkyy7KBXKyUj9DLpjLMd5NT5MOCoE3lptLJBOj6n3r8SBgfEqc\ndjPHkX7Ozue85c7BnVHnU3/bFYnljPkzsF1w76/MEiELkdqPmRrem0xh6gZq\niuVB\r\n=Afju\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.15","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightlyc49127232120220201.1","@fluentui/react-utilities":"0.0.0-nightlyc49127232120220201.1","@fluentui/react-shared-contexts":"0.0.0-nightlyc49127232120220201.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlyc49127232120220201.1_1643689030904_0.7851336212817543","host":"s3://npm-registry-packages"}},"0.0.0-nightlya21bfaceec20220202.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightlya21bfaceec20220202.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightlya21bfaceec20220202.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"303132d402862ff419095b4e7ecc22127341677e","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightlya21bfaceec20220202.1.tgz","fileCount":43,"integrity":"sha512-uEKQZKm3gNMNsKD7miNgw60/saPggXdqRnIFFVPPbJhPRv1OejQebHn0ikorcI6s1NCbbPkJY6sJlGoVUyfPYg==","signatures":[{"sig":"MEUCIQClmGgfGXTK0c0lV3yCnNDPpiKP2nnI3b8wDAnDNVu3WQIgdGnJLo8/b/fFjQS35Fdm8C2M6AktjB3vRF9vXNFsL1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+gWNCRA9TVsSAnZWagAAeDEP/Awi05WAxklsrN+YGYLL\nalcFkPSldHTJhV9h2HWXqBY3inXVTQjZT8sQVmHPC4OgMKELG0a/OgYmOBMy\nYxqfG0anho6bsMpTA16UoUSg0jemJ/3fHD2rd3y5P4FSqg8ZzETGa1aWcBHC\nMHSJc9PGfnHaQzZ9eb7KETMegxNld6SoqlwHxNtDzzpvKroNU+jjaF5m7iu/\nRzrT1YTq8E9USt1XXC+7h5OL9Jw5WmO8yDykyClzC1DD1x/oZB2wHSen/SVk\nAaYU5n4/xpAMrWKqATr1pKdZbeP3x8cm6X5y4SOnrlDf436y53NFB7XRTtxQ\nCADdOTxBIB3pZlbEvxuijO3+T2pJKdB0pm8b5W4keNEnRWkkarjVv1oDXS1E\nfpQpfKyuIT2sBou6j5Lve3+w1L2bSHmQQ/U4+auy4UB45e7faLpXLVz8S5TX\neEnk/88KsvBpkmfq/9arWI3K46GOLxI1OExrNrylE92XRYLR3ptjwqnBB32p\n8BGG8HPLfG9ScmSBka1iD+VfNo+lhNBMjWddfbLdcSNHgpVFBMtMRQ+8jCVP\n5rp3L6AC3E7+fUJX8/F3tn+1sJIhQ6nfnupl8PMboHcjpwhwwwnos0upwnLV\nqMl0AMwHcCAf9ZFAuveLmkpREkm/dMy/hXciNyrYaNhhVksVyaIntneTqrxu\nn+TR\r\n=Fx1+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.16","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightlya21bfaceec20220202.1","@fluentui/react-utilities":"0.0.0-nightlya21bfaceec20220202.1","@fluentui/react-shared-contexts":"0.0.0-nightlya21bfaceec20220202.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightlya21bfaceec20220202.1_1643775373558_0.3012245065865069","host":"s3://npm-registry-packages"}},"0.0.0-nightly946f57cad420220203.1":{"name":"@fluentui/react-make-styles","version":"0.0.0-nightly946f57cad420220203.1","license":"MIT","_id":"@fluentui/react-make-styles@0.0.0-nightly946f57cad420220203.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"allsnow","email":"allsnow@microsoft.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"cb1a9961bbae92cc71cbc4c89cb81652a92fd0fd","tarball":"https://registry.npmjs.org/@fluentui/react-make-styles/-/react-make-styles-0.0.0-nightly946f57cad420220203.1.tgz","fileCount":43,"integrity":"sha512-LuWtvm+zC2b7Y6F8xO0aHlrOdfv1COfd53jMeiV3rLS8ZyaoJ8kUZZXPTI2G7VGM53iOZuRiUCzi4XaS2gUEvg==","signatures":[{"sig":"MEUCIDwAy6nJRakObzN5D2wrCiG9UW6nlRkvk9GMyfuC43BZAiEAmiwVAY1ICzqZlr4LbzjRK8I66kK/URXI6eBHBDFI1fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+1goCRA9TVsSAnZWagAAczUQAKNL+V0FXQELxxu7FsSL\n6onWapLyb+Vq1vttCsudIPQiee+12crkrs4Xasj8M95at1ywacmOqT9WGO9y\nPxq3aTvvbCTqAPq8q7UqRPCudh0IlTVYUnoN1nI4U6YzTY5wuHDHVN8pf/jX\n7GPnG4I1eV+6xAyYjYEAlVnjujEsYyuTXQDgHVTNy2vylIb5El1NY7CCmM9u\n/0audS4HFlO8BXM6cBiqpF1vp05ptWbdrZEkt6uwq3Cixkk4FSMKwMnbzxzU\na/tvUUQwRcaedvqjhB7uY3bBrM4QlC2pxpCQL6z4t0L+b2ESwUxlAq09WpQ5\nBiGVVSIT5Cu5St3ETmbDHQG1cZv7cEBbqY3pbXLLqhKXcIJWMJULUR7V+CJw\nYHBleJZk/kIyMBw4T921msDS4e3GeqE185HyckFdv0Evvm3UCGWKUqpoPEop\nMYoAxpRVUYq2FZQ+8oXA7QOp9ose2yv/UuPXWUEGzL7M2ASNtRahuzRruE8c\nk+HtVXeMElQZ0tp8GUtSGpZ8XS90/9qodXo6b2LhaIfZuIBHYZ6UE88vhbBR\ndU+u58M37sEejPfXdltpGJzbBkJRuWOAEYTzM2I4taTwF1ab8Ze6HuFnM+0Z\nGFufb3neM6i99Xs9gQc7JEXU1U27g/2RW344EQtH9P+FtjC7iJGiw3q23Hlm\nRWUF\r\n=4684\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-make-styles\n\n**React bindings for `makeStyles()` for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**\n\nThese are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\n## `makeStyles()`\n\nIs used to defined styles, returns a React hook that should be called inside a component:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  button: { color: 'red' },\n  icon: { padding: '5px' },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <button className={classes.button} />\n      <span className={classes.icon} />\n    </div>\n  );\n}\n```\n\n### 💅 theming support\n\n`makeStyles()` consumes a React context defined by `FluentProvider`, design tokens can be consumed via style functions:\n\n```tsx\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.colorNeutralForeground1,\n    display: 'flex',\n  }),\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  return <div className={classes.root} />;\n}\n\nfunction App() {\n  return (\n    // 👇 you can use any predefined theme or create yours\n    <FluentProvider theme={webLightTheme}>\n      <Component />\n    </FluentProvider>\n  );\n}\n```\n\nTheme shape is defined by the `Theme` type which is embedded into `makeStyles()`.\n\n### 🔀 merging classes\n\n> 💡 **It is not possible to simply concatenate `useStyles()` classes.**\n\nThere are cases where you need to merge classes from multiple `useStyles` calls. To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.\n\n```tsx\nimport { mergeClasses, makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  blueBold: {\n    color: 'blue',\n    fontWeight: 'bold',\n  },\n  red: {\n    color: 'red',\n  },\n});\n\nfunction Component() {\n  const classes = useStyles();\n\n  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }\n  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }\n\n  return (\n    <>\n      <div className={firstClassName} />\n      <div className={secondClassName} />\n    </>\n  );\n}\n```\n\n### 📃 pseudo & class selectors, at-rules, global styles\n\n`makeStyles()` supports pseudo, class selectors and at-rules.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':active': { color: 'pink' },\n    ':hover': { color: 'blue' },\n    // :link, :focus, etc.\n\n    '.foo': { color: 'black' },\n    ':nth-child(2n)': { background: '#fafafa' },\n\n    '@media screen and (max-width: 992px)': { color: 'orange' },\n    '@supports (display: grid)': { color: 'red' },\n  },\n});\n```\n\nAnother useful feature is `:global()` selector, it allows to connect local styles with global selectors.\n\n```ts\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    ':global(html[data-whatintent=\"mouse\"])': { background: 'yellow' },\n    // outputs: html[data-whatintent=\"mouse\"] .abcd { background: yellow }\n  },\n});\n```\n\n### 🎞 `keyframes` (animations)\n\n`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:\n\n```tsx\nimport { makeStyles } from '@fluentui/react-components';\n\nconst useStyles = makeStyles({\n  root: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: {\n      from: { transform: 'rotate(0deg)' },\n      to: { transform: 'rotate(360deg)' },\n    },\n  },\n  array: {\n    animationIterationCount: 'infinite',\n    animationDuration: '3s',\n    animationName: [\n      {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' },\n      },\n      {\n        from: { height: '100px' },\n        to: { height: '200px' },\n      },\n    ],\n  },\n});\n```\n\n## `makeStaticStyles()`\n\nCreates styles attached to a global selector. Styles can be defined via objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles = makeStaticStyles({\n  '@font-face': {\n    fontFamily: 'Open Sans',\n    src: `url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n         url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")`,\n  },\n  body: {\n    background: 'red',\n  },\n\n  /**\n   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting\n   *\n   * Not supported:\n   * .some {\n   *   .class { ... },\n   *   ':hover': { ... }\n   * }\n   *\n   * Supported:\n   * '.some.class': { ... }\n   * '.some.class:hover': { ... }\n   */\n});\n\nfunction App() {\n  useStaticStyles();\n\n  return <div />;\n}\n```\n\nOr with string & arrays of strings/objects:\n\n```tsx\nimport { makeStaticStyles } from '@fluentui/react-components';\n\nconst useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');\nconst useStaticStyles2 = makeStaticStyles([\n  {\n    '@font-face': {\n      fontFamily: 'My Font',\n      src: `url(my_font.woff)`,\n    },\n  },\n  'html { line-height: 20px; }',\n]);\n\nfunction App() {\n  useStaticStyles1();\n  useStaticStyles2();\n\n  return <div />;\n}\n```\n","scripts":{"docs":"api-extractor run --config=config/api-extractor.local.json --local","just":"just-scripts","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","storybook":"node ../../scripts/storybook/runner","code-style":"just-scripts code-style","type-check":"tsc -b tsconfig.json","build:local":"tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-make-styles/src && yarn docs","bundle-size":"bundle-size measure"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","minor","patch"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.16","description":"React bindings for @fluentui/make-styles","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@griffel/core":"1.0.7","@fluentui/react-theme":"0.0.0-nightly946f57cad420220203.1","@fluentui/react-utilities":"0.0.0-nightly946f57cad420220203.1","@fluentui/react-shared-contexts":"0.0.0-nightly946f57cad420220203.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","react-dom":"16.8.6","@types/react":"16.9.42","@types/react-dom":"16.9.10","@fluentui/scripts":"^1.0.0","@fluentui/eslint-plugin":"*"},"peerDependencies":{"react":">=16.8.0 <18.0.0","@types/react":">=16.8.0 <18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-make-styles_0.0.0-nightly946f57cad420220203.1_1643862056139_0.9888044501120952","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-02-03T22:54:25.274Z","modified":"2026-07-24T19:29:10.333Z","0.2.0":"2021-02-03T22:54:25.571Z","0.2.1":"2021-02-04T01:27:16.644Z","0.2.2":"2021-02-05T12:19:49.917Z","0.2.3":"2021-02-08T12:21:56.952Z","0.2.4":"2021-02-09T00:55:24.860Z","0.2.5-0":"2021-02-11T00:57:36.677Z","0.2.5":"2021-02-12T12:22:57.670Z","0.2.6":"2021-02-15T12:20:59.008Z","0.2.7-0":"2021-02-18T12:26:08.440Z","0.2.7":"2021-02-18T19:38:03.966Z","0.2.8":"2021-02-22T12:24:58.365Z","9.0.0-alpha.1":"2021-02-24T00:04:02.709Z","9.0.0-alpha.2":"2021-02-25T01:13:20.328Z","9.0.0-alpha.3":"2021-02-25T20:14:47.190Z","9.0.0-alpha.4":"2021-02-26T01:14:43.311Z","9.0.0-alpha.5":"2021-03-02T07:23:24.625Z","9.0.0-alpha.6":"2021-03-03T00:08:11.307Z","9.0.0-alpha.7":"2021-03-05T20:30:11.330Z","9.0.0-alpha.8":"2021-03-10T07:33:30.550Z","9.0.0-alpha.9":"2021-03-12T20:02:10.435Z","9.0.0-alpha.10":"2021-03-15T07:35:05.730Z","9.0.0-alpha.11":"2021-03-16T07:30:16.032Z","9.0.0-alpha.12":"2021-03-18T20:13:07.882Z","9.0.0-alpha.13":"2021-03-23T07:29:42.114Z","9.0.0-alpha.14":"2021-03-25T07:30:23.659Z","9.0.0-alpha.15":"2021-03-26T07:30:33.550Z","9.0.0-alpha.16":"2021-03-30T07:32:39.194Z","9.0.0-alpha.17":"2021-03-31T00:49:20.088Z","9.0.0-alpha.18":"2021-04-01T20:12:03.969Z","9.0.0-alpha.19":"2021-04-08T07:31:30.897Z","9.0.0-alpha.20":"2021-04-09T07:29:51.083Z","9.0.0-alpha.21":"2021-04-14T07:31:36.546Z","9.0.0-alpha.22":"2021-04-16T18:06:58.353Z","9.0.0-alpha.23":"2021-04-20T07:29:47.226Z","9.0.0-alpha.24":"2021-04-21T07:29:28.148Z","9.0.0-alpha.25":"2021-04-22T07:31:30.654Z","9.0.0-alpha.26":"2021-04-23T07:35:19.995Z","9.0.0-alpha.27":"2021-04-26T07:31:44.162Z","9.0.0-alpha.28":"2021-04-27T07:31:12.906Z","9.0.0-alpha.29":"2021-04-30T07:39:54.593Z","9.0.0-alpha.30":"2021-05-05T07:34:57.102Z","9.0.0-alpha.31":"2021-05-10T07:33:33.273Z","9.0.0-alpha.32":"2021-05-12T07:34:06.881Z","9.0.0-alpha.33":"2021-05-13T07:34:18.017Z","9.0.0-alpha.34":"2021-05-18T07:31:51.463Z","9.0.0-alpha.35":"2021-05-19T07:31:52.428Z","9.0.0-alpha.36":"2021-05-20T07:36:41.549Z","9.0.0-alpha.37":"2021-05-21T07:31:46.117Z","9.0.0-alpha.38":"2021-05-26T07:32:53.092Z","9.0.0-alpha.39":"2021-06-03T07:34:26.392Z","9.0.0-alpha.40":"2021-06-04T07:34:14.170Z","9.0.0-alpha.41":"2021-06-07T07:33:45.244Z","9.0.0-alpha.42":"2021-06-15T07:36:28.474Z","9.0.0-alpha.43":"2021-06-29T07:30:12.236Z","9.0.0-alpha.44":"2021-06-30T07:35:58.479Z","9.0.0-alpha.45":"2021-07-02T07:35:25.058Z","9.0.0-alpha.46":"2021-07-02T23:13:00.269Z","9.0.0-alpha.47":"2021-07-09T07:34:39.059Z","9.0.0-alpha.48":"2021-07-13T07:32:22.914Z","9.0.0-alpha.49":"2021-07-15T07:33:17.012Z","9.0.0-alpha.50":"2021-07-22T07:33:30.335Z","9.0.0-alpha.51":"2021-07-23T07:35:25.564Z","9.0.0-alpha.52":"2021-07-26T07:34:38.368Z","9.0.0-alpha.53":"2021-08-02T07:34:47.330Z","9.0.0-alpha.54":"2021-08-03T07:35:31.737Z","9.0.0-alpha.55":"2021-08-06T07:33:16.868Z","9.0.0-alpha.56":"2021-08-13T07:33:55.794Z","9.0.0-alpha.57":"2021-08-19T07:37:00.530Z","9.0.0-alpha.58":"2021-08-20T07:35:15.029Z","9.0.0-alpha.59":"2021-08-24T07:32:48.461Z","9.0.0-alpha.60":"2021-08-31T07:34:46.603Z","9.0.0-alpha.61":"2021-09-01T07:38:22.604Z","9.0.0-alpha.62":"2021-09-06T07:32:36.029Z","9.0.0-alpha.63":"2021-09-10T07:36:47.906Z","9.0.0-alpha.64":"2021-09-10T16:30:18.352Z","9.0.0-alpha.65":"2021-09-14T20:06:39.352Z","9.0.0-alpha.66":"2021-09-16T07:36:13.495Z","9.0.0-alpha.67":"2021-09-17T07:33:10.563Z","9.0.0-alpha.68":"2021-09-20T07:35:28.451Z","9.0.0-alpha.69":"2021-09-21T07:40:52.035Z","9.0.0-alpha.70":"2021-09-22T10:09:14.530Z","9.0.0-alpha.71":"2021-09-23T08:20:38.816Z","9.0.0-alpha.72":"2021-09-24T09:16:26.120Z","9.0.0-alpha.73":"2021-09-27T08:05:11.059Z","9.0.0-alpha.74":"2021-09-29T08:05:22.714Z","9.0.0-alpha.76":"2021-10-01T14:12:15.238Z","9.0.0-alpha.77":"2021-10-05T09:27:08.029Z","9.0.0-alpha.78":"2021-10-05T12:47:08.842Z","9.0.0-beta.1":"2021-10-06T10:36:26.939Z","9.0.0-nightly.f81b28ceb3.1":"2021-10-19T12:39:45.083Z","9.0.0-nightly.d730088d7f.0":"2021-10-20T09:20:04.653Z","9.0.0-nightly.25435def33.0":"2021-10-21T09:18:40.405Z","9.0.0-nightly.1df0025867.0":"2021-10-22T09:17:01.090Z","9.0.0-nightly.46b9ea7036.0":"2021-10-25T09:18:15.484Z","9.0.0-nightly.b5b7401007.0":"2021-10-26T09:23:57.425Z","9.0.0-beta.2":"2021-10-27T12:12:58.751Z","0.0.0-nightly0e0cf06c3420211029.1":"2021-10-29T06:40:32.701Z","0.0.0-nightly050f89bf0020211102.1":"2021-11-02T08:41:30.615Z","0.0.0-nightlya372ad979820211103.1":"2021-11-03T08:24:49.118Z","0.0.0-nightlybc5ff01fb020211104.1":"2021-11-04T04:21:27.582Z","0.0.0-nightly01492e29df20211105.1":"2021-11-05T04:16:54.887Z","0.0.0-nightly0025eeb82020211108.1":"2021-11-08T04:17:49.854Z","0.0.0-nightly627ad67f1120211109.1":"2021-11-09T04:21:24.651Z","0.0.0-nightlyf3ce1fbe1d20211110.1":"2021-11-10T04:17:49.239Z","0.0.0-nightlyfbae36b19b20211111.1":"2021-11-11T04:19:59.597Z","0.0.0-nightlyed2d7c8d6320211111.1":"2021-11-11T13:13:46.045Z","0.0.0-nightlyfe9829e48120211112.1":"2021-11-12T04:21:21.746Z","9.0.0-beta.3":"2021-11-12T12:34:23.599Z","0.0.0-nightly906d31cfa320211115.1":"2021-11-15T04:17:03.162Z","0.0.0-nightly9edaf68d4420211116.1":"2021-11-16T04:19:10.083Z","0.0.0-nightly8825574c4220211117.1":"2021-11-17T04:19:17.102Z","0.0.0-nightly8faa94d11420211118.1":"2021-11-18T04:19:30.087Z","0.0.0-nightly57a9843f2620211119.1":"2021-11-19T04:19:44.147Z","0.0.0-nightlyc9ccb6f37d20211122.1":"2021-11-22T04:16:01.233Z","0.0.0-nightlyc0273fdc6920211123.1":"2021-11-23T04:20:24.499Z","0.0.0-nightlya54302c0b220211124.1":"2021-11-24T04:13:20.384Z","0.0.0-nightly99adff5a9a20211125.1":"2021-11-25T04:14:39.343Z","9.0.0-beta.4":"2021-11-25T08:32:10.365Z","0.0.0-nightlybd3e92b51920211126.1":"2021-11-26T04:16:03.847Z","0.0.0-nightlyb8537fb52c20211129.1":"2021-11-29T04:14:18.994Z","0.0.0-nightlyb2deb9be1720211130.1":"2021-11-30T04:14:24.470Z","0.0.0-nightlyd3bf09bf8120211201.1":"2021-12-01T04:26:40.070Z","0.0.0-nightly554221a5aa20211202.1":"2021-12-02T04:17:16.237Z","0.0.0-nightly131c59c96120211203.1":"2021-12-03T04:14:20.119Z","0.0.0-nightly39ce3cbcf120211206.1":"2021-12-06T04:18:05.920Z","0.0.0-nightlyebf02572f720211207.1":"2021-12-07T04:15:28.871Z","0.0.0-nightlya0ab3454ed20211208.1":"2021-12-08T04:19:29.679Z","0.0.0-nightly442708a36520211209.1":"2021-12-09T04:16:08.469Z","0.0.0-nightly89deee5b2a20211210.1":"2021-12-10T04:19:28.535Z","0.0.0-nightly65dd5f749420211213.1":"2021-12-13T04:17:37.727Z","0.0.0-nightlyf1be0a972820211214.1":"2021-12-14T04:17:20.478Z","0.0.0-nightly28ceaaa83c20211215.1":"2021-12-15T04:16:59.907Z","0.0.0-nightly58c310891320211216.1":"2021-12-16T04:16:02.552Z","0.0.0-nightly2462abf75c20211217.1":"2021-12-17T04:15:56.015Z","0.0.0-nightlycc44f3625c20211220.1":"2021-12-20T04:19:05.391Z","0.0.0-nightly07d9ed6d1b20211221.1":"2021-12-21T04:17:49.448Z","0.0.0-nightlycbf184efa720211222.1":"2021-12-22T04:14:45.410Z","0.0.0-nightly9942542e5320220104.1":"2022-01-04T04:21:55.872Z","0.0.0-nightlyca6ef2bc8e20220105.1":"2022-01-05T04:19:45.635Z","0.0.0-nightlyf8be6a7c6520220106.1":"2022-01-06T04:31:30.610Z","0.0.0-nightly8c37bdfa2420220107.1":"2022-01-07T04:19:33.609Z","0.0.0-nightlyecca467a8920220110.1":"2022-01-10T04:16:44.613Z","0.0.0-nightly003de9a95220220111.1":"2022-01-11T04:20:03.054Z","0.0.0-nightly3bc051736320220112.1":"2022-01-12T04:21:13.249Z","0.0.0-nightlya9c3d10d9520220113.1":"2022-01-13T04:17:12.941Z","0.0.0-nightly5ab766c40f20220114.1":"2022-01-14T04:16:32.455Z","0.0.0-nightly940a86cbd620220117.1":"2022-01-17T04:15:35.110Z","0.0.0-nightly8dfa71215620220118.1":"2022-01-18T04:16:20.280Z","0.0.0-nightlydd0f007b3f20220119.1":"2022-01-19T04:18:25.741Z","0.0.0-nightly63afcc343820220120.1":"2022-01-20T04:19:33.885Z","0.0.0-nightlyd514b3e0ee20220121.1":"2022-01-21T04:18:12.480Z","0.0.0-nightlyf6116328d620220124.1":"2022-01-24T04:15:49.325Z","0.0.0-nightly6a6e258c4020220125.1":"2022-01-25T04:19:20.654Z","0.0.0-nightly0bc161458e20220126.1":"2022-01-26T04:18:55.823Z","0.0.0-nightly4e6470c86320220127.1":"2022-01-27T04:19:42.548Z","0.0.0-nightlye0b8e1fa6920220128.1":"2022-01-28T04:15:54.023Z","0.0.0-nightly940de09b9520220131.1":"2022-01-31T04:18:46.567Z","0.0.0-nightlyc49127232120220201.1":"2022-02-01T04:17:11.047Z","0.0.0-nightlya21bfaceec20220202.1":"2022-02-02T04:16:13.708Z","0.0.0-nightly946f57cad420220203.1":"2022-02-03T04:20:56.321Z"},"bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"license":"MIT","homepage":"https://github.com/microsoft/fluentui#readme","repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"description":"React bindings for @fluentui/make-styles","maintainers":[{"email":"fui-svc@microsoft.com","name":"uifabricteam"},{"email":"uifrnbot@microsoft.com","name":"uifrnbot"},{"email":"npmjs@microsoft.com","name":"microsoft1es"},{"email":"microsoft-oss-publishing@microsoft.com","name":"microsoft-oss-releases"}],"readme":"","readmeFilename":""}